import Card from "@/src/components/lib/elements/Card";
import H2 from "@/src/components/lib/layout/H2";
import H3 from "@/src/components/lib/layout/H3";
import Section from "@/src/components/lib/layout/Section";
import Span from "@/src/components/lib/layout/Span";
import Stack from "@/src/components/lib/layout/Stack";
import { work } from "../(data)/work";
import Link from "@/src/components/lib/layout/Link";
import React, { Fragment } from "react";
import Row from "@/src/components/lib/layout/Row";
import Divider from "@/src/components/lib/layout/Divider";
import { twMerge } from "tailwind-merge";
import { CheckCircle2, Circle } from "lucide-react";
import ArrowedLink from "@/src/components/lib/layout/ArrowedLink";

type Props = {
    noTitle?: boolean;
    expand?: boolean;
};

export default function MyWorkSection({ noTitle, expand }: Props) {
    const categories = Object.keys(work) as (keyof typeof work)[];
    const [category, setCategory] = React.useState<keyof typeof work>(
        categories[0],
    );

    const TitleSection = (
        <Row className="w-full justify-between">
            <Stack>
                {!noTitle && (
                    <React.Fragment>
                        <H2 className="leading-snug m-0">My Work</H2>
                        <Span>Some work I've done in the past</Span>
                        <Divider className="opacity-0 my-2" />
                    </React.Fragment>
                )}
            </Stack>

            {noTitle ? null : (
                <ArrowedLink
                    link={{
                        url: `/work`,
                        title: `See my work`,
                    }}
                />
            )}
        </Row>
    );

    if (expand) {
        return (
            <Section>
                <Stack className="w-full">
                    {TitleSection}

                    <Stack className="items-stretch gap-20 flex-row xl:flex-col flex-wrap md:flex-nowrap">
                        {categories.map((ctgr, i) => {
                            const isActive = category === ctgr;
                            return (
                                <Stack key={i}>
                                    <Stack className="gap-6">
                                        <H3 className="m-0 text-lg">{ctgr}</H3>

                                        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 w-full">
                                            {work[ctgr].portfolio.map(
                                                (portfolio, index) => {
                                                    return (
                                                        <MyWorkPortfolioCard
                                                            portfolio={
                                                                portfolio as any
                                                            }
                                                            key={index}
                                                        />
                                                    );
                                                },
                                            )}
                                        </div>
                                    </Stack>
                                </Stack>
                            );
                        })}
                    </Stack>
                </Stack>
            </Section>
        );
    }

    return (
        <Section>
            <Stack className="w-full">
                {TitleSection}

                <Row className="flex-nowrap items-start gap-x-14 flex-col xl:flex-row gap-y-10">
                    <Stack className="xl:max-w-[200px] items-stretch gap-6 flex-row xl:flex-col flex-wrap md:flex-nowrap">
                        {categories.map((ctgr, i) => {
                            const isActive = category === ctgr;
                            return (
                                <Stack
                                    key={i}
                                    className={twMerge(
                                        "cursor-pointer",
                                        isActive
                                            ? ""
                                            : "opacity-40 hover:opacity-70",
                                    )}
                                    onClick={() => setCategory(ctgr)}
                                >
                                    <Stack className="gap-1">
                                        <H3 className="m-0 text-lg">{ctgr}</H3>
                                    </Stack>
                                </Stack>
                            );
                        })}
                    </Stack>

                    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 w-full">
                        {work[category].portfolio.map((portfolio, index) => {
                            return (
                                <MyWorkPortfolioCard
                                    portfolio={portfolio as any}
                                    key={index}
                                />
                            );
                        })}
                    </div>
                </Row>
            </Stack>
        </Section>
    );
}

export function MyWorkPortfolioCard({
    portfolio,
}: {
    portfolio: (typeof work.Devops.portfolio)[number];
}) {
    return (
        <Card className="grow w-full items-start">
            <Stack className="gap-4">
                <H3 className="m-0">{portfolio.title}</H3>

                <Link
                    target="_blank"
                    href={portfolio.href}
                    className="text-sm text-wrap break-all border- dotted-text"
                >
                    {portfolio.href}
                </Link>
                <Span>{portfolio.description}</Span>
                {portfolio.metrics?.[0] && (
                    <Fragment>
                        <Divider />
                        <Row className="gap-4">
                            {portfolio.metrics.map((tch, _i) => (
                                <React.Fragment key={_i}>
                                    <Row>
                                        <CheckCircle2 size={15} />
                                        <Span className="text-xs dark:text-white/40">
                                            {tch}
                                        </Span>
                                    </Row>
                                </React.Fragment>
                            ))}
                        </Row>
                    </Fragment>
                )}
                {portfolio.technologies?.[0] && (
                    <Fragment>
                        <Divider />
                        <Row className="gap-4 opacity-60">
                            {portfolio.technologies.map((tch, _i) => (
                                <React.Fragment key={_i}>
                                    <Span className="text-xs dark:text-white/40">
                                        {tch}
                                    </Span>
                                    {_i < portfolio.technologies.length - 1 && (
                                        <Divider vertical />
                                    )}
                                </React.Fragment>
                            ))}
                        </Row>
                    </Fragment>
                )}
            </Stack>
        </Card>
    );
}
