"use client";

import Image from "next/image";
import { Link } from "@/i18n/routing";
import { Badge, Card, Typography } from "poyraz-ui/atoms";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
import { StaggerContainer, StaggerItem } from "@/components/motion-wrapper";
import { BOOKMARKS } from "@/data/bookmarks";
import { certificates } from "@/data/certificates";
import { EDUCATION } from "@/data/education";
import { EXPERIENCE } from "@/data/experience";
import { useTranslations, useLocale } from "next-intl";
import { getLocalizedValue } from "@/lib/locale";

export function AboutContent() {
  const t = useTranslations("About");
  const locale = useLocale();

  return (
    <section className="flex h-full flex-col gap-3 overflow-hidden">
      <div className="grid gap-3 md:grid-cols-2">
        <Card className="rounded-sm border-border p-4">
          <Typography variant="p" className="text-sm leading-relaxed text-muted-foreground">
            {t("aboutText")}
          </Typography>
        </Card>

        <div>
          <StaggerContainer className="grid gap-2">
            {EDUCATION.map((item) => (
              <StaggerItem key={item.id}>
                <Card className="rounded-sm border-border p-3">
                  <Typography variant="large" className="text-base leading-tight">
                    {getLocalizedValue(item.title, locale)}
                  </Typography>
                  <Typography variant="small" className="mt-0.5 text-muted-foreground">
                    {item.institution}
                  </Typography>
                  <Typography variant="small" className="mt-1 text-red-600">
                    {getLocalizedValue(item.period, locale)}
                  </Typography>
                </Card>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </div>

      <div className="grid gap-3 md:grid-cols-2 md:items-start">
        <Sheet>
          <SheetTrigger asChild>
            <button
              type="button"
              className="cursor-pointer text-left"
              aria-label="Tüm sertifikaları aç"
            >
              <Card className="rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
                <div className="grid grid-cols-2 gap-2">
                  {certificates.slice(0, 4).map((item) => (
                    <div
                      key={getLocalizedValue(item.name, locale)}
                      className="relative aspect-4/3 overflow-hidden rounded-sm border border-border"
                    >
                      <Image
                        src={item.image}
                        alt={getLocalizedValue(item.name, locale)}
                        fill
                        sizes="(max-width: 768px) 45vw, 22vw"
                        className="object-cover"
                      />
                    </div>
                  ))}
                </div>
              </Card>
            </button>
          </SheetTrigger>

          <SheetContent side="right" className="w-full max-w-xl p-4">
            <SheetTitle>{t("allCertificates")}</SheetTitle>
            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
              {certificates.map((item) => (
                <Card key={`${getLocalizedValue(item.name, locale)}-${getLocalizedValue(item.date, locale)}`} className="rounded-sm border-border p-3">
                  <div className="flex gap-3">
                    <div className="relative h-20 w-28 shrink-0 overflow-hidden rounded-sm border border-border">
                      <Image
                        src={item.image}
                        alt={getLocalizedValue(item.name, locale)}
                        fill
                        sizes="112px"
                        className="object-cover"
                      />
                    </div>
                    <div className="min-w-0">
                      <Typography variant="large" className="leading-tight">
                        {getLocalizedValue(item.name, locale)}
                      </Typography>
                      <Typography variant="small" className="text-muted-foreground">
                        {item.organization}
                      </Typography>
                      <Typography variant="small" className="text-red-600">
                        {getLocalizedValue(item.date, locale)}
                      </Typography>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </SheetContent>
        </Sheet>

        <div className="h-full">
          <StaggerContainer className="grid gap-2">
            {EXPERIENCE.map((item) => (
              <StaggerItem key={item.id}>
                <Card className="rounded-sm border-border p-3">
                  <Typography variant="large" className="text-base leading-tight">
                    {getLocalizedValue(item.role, locale)}
                  </Typography>
                  <Typography variant="small" className="mt-0.5 text-muted-foreground">
                    {item.company}
                  </Typography>
                  <Typography variant="small" className="mt-1 text-red-600">
                    {getLocalizedValue(item.period, locale)}
                  </Typography>
                </Card>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </div>

      <div className="grid gap-3 md:grid-cols-3">
        <Link href="/about/references" className="block">
          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
            <Typography variant="large" className="text-base leading-tight">
              {t("referencesTitle")}
            </Typography>
            <Typography variant="small" className="mt-1 text-muted-foreground">
              {t("referencesDesc")}
            </Typography>
          </Card>
        </Link>

        <Link href="/about/volunteer-community" className="block">
          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
            <Typography variant="large" className="text-base leading-tight">
              {t("volunteerTitle")}
            </Typography>
            <Typography variant="small" className="mt-1 text-muted-foreground">
              {t("volunteerDesc")}
            </Typography>
          </Card>
        </Link>

        <Sheet>
          <SheetTrigger asChild>
            <button
              type="button"
              className="cursor-pointer text-left"
              aria-label="Yer imlerini aç"
            >
              <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
                <Typography variant="large" className="text-base leading-tight">
                  {t("bookmarksTitle")}
                </Typography>
                <Typography variant="small" className="mt-1 text-muted-foreground">
                  {t("bookmarksDesc")}
                </Typography>
              </Card>
            </button>
          </SheetTrigger>

          <SheetContent side="right" className="w-full max-w-xl p-4">
            <SheetTitle>{t("bookmarksTitle")}</SheetTitle>
            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
              {BOOKMARKS.map((item) => (
                <Card key={item.id} className="rounded-sm border-border p-3">
                  <div className="flex flex-wrap items-center gap-2">
                    <Typography variant="large" className="leading-tight">
                      {item.title}
                    </Typography>
                    <Badge variant="outline" className="rounded-sm">
                      {item.tag}
                    </Badge>
                  </div>
                  <Typography variant="small" className="mt-1 text-muted-foreground">
                    {getLocalizedValue(item.description, locale)}
                  </Typography>
                  <Link
                    href={item.href}
                    target="_blank"
                    rel="noreferrer"
                    className="mt-2 inline-flex text-sm text-red-600 hover:underline"
                  >
                    {item.href.replace("https://", "")}
                  </Link>
                </Card>
              ))}
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </section>
  );
}