"use client";

import { useMemo } from "react";
import Image from "next/image";
import { useConfigDoc } from "@/hooks/useConfigDoc";
import { COLLECTIONS, CONFIG_DOCS } from "@/lib/firestore-paths";
import { defaultAbout, defaultSettings } from "@/lib/defaults";
import type { AboutProfile, SiteSettings } from "@/types/models";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { FadeIn } from "@/components/motion/FadeIn";
import { GlassPanel } from "@/components/ui/GlassPanel";
import { publicImageSrc } from "@/lib/public-image";
import { SocialLinks } from "@/components/social/SocialLinks";

export default function AboutPage() {
  const { data: profile } = useConfigDoc<AboutProfile>(
    COLLECTIONS.config,
    CONFIG_DOCS.about,
    defaultAbout
  );
  const { data: settings } = useConfigDoc<SiteSettings>(
    COLLECTIONS.config,
    CONFIG_DOCS.settings,
    defaultSettings
  );

  const timeline = useMemo(() => {
    const edu = profile.education.map((e) => ({
      kind: "education" as const,
      year: e.year,
      title: e.title,
      place: e.institution,
      detail: e.description,
    }));
    const exp = profile.experience.map((x) => ({
      kind: "experience" as const,
      year: x.year,
      title: x.title,
      place: x.organization,
      detail: x.description,
    }));
    return [...exp, ...edu].sort((a, b) => b.year.localeCompare(a.year));
  }, [profile.education, profile.experience]);

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
      <FadeIn>
        <SectionTitle
          eyebrow="Profil"
          title="Hakkımda"
          subtitle="Eğitim, deneyim ve mesleki yaklaşımım hakkında şeffaf bilgiler."
        />
      </FadeIn>

      <div className="mt-12 grid gap-10 lg:grid-cols-[400px_1fr] lg:gap-12">
        <FadeIn>
          <GlassPanel className="sticky top-24 border border-black/5 bg-white/90 p-6 sm:p-8">
            <div className="relative mx-auto aspect-[3/4] w-full max-w-[320px] overflow-hidden rounded-2xl bg-gradient-to-b from-[#eef0f6] to-white sm:max-w-[360px] lg:max-w-none">
              {profile.photoUrl ? (
                <Image
                  src={publicImageSrc(profile.photoUrl)}
                  alt="Profil"
                  fill
                  className="object-cover"
                  unoptimized
                />
              ) : (
                <div className="flex h-full items-center justify-center text-sm text-[var(--muted)]">
                  Fotoğraf admin panelden eklenebilir
                </div>
              )}
            </div>
            <div className="mt-6 border-t border-black/5 pt-6">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--gold-dark)]">
                Sosyal medya
              </p>
              <SocialLinks
                links={settings.social}
                buttonClassName="bg-[#f6f7fb]"
                emptyMessage="Admin panelinden sosyal medya bağlantısı ekleyebilirsiniz."
              />
            </div>
          </GlassPanel>
        </FadeIn>

        <div>
          <FadeIn>
            <GlassPanel className="border border-black/5 bg-white/90 p-8">
              <h2 className="font-[family-name:var(--font-display)] text-2xl text-[var(--navy)]">
                Biyografi
              </h2>
              <p className="mt-4 whitespace-pre-line text-sm leading-relaxed text-[var(--muted)]">
                {profile.biography}
              </p>
            </GlassPanel>
          </FadeIn>

          <div className="mt-12">
            <FadeIn>
              <h3 className="font-[family-name:var(--font-display)] text-2xl text-[var(--navy)]">
                Zaman çizelgesi
              </h3>
              <p className="mt-2 text-sm text-[var(--muted)]">
                Deneyim ve eğitim adımları kronolojik akışta.
              </p>
            </FadeIn>
            <div className="relative mt-8 space-y-8 pl-6 before:absolute before:left-[7px] before:top-2 before:h-[calc(100%-16px)] before:w-px before:bg-gradient-to-b before:from-[var(--gold)] before:to-black/10">
              {timeline.map((item, idx) => (
                <FadeIn key={`${item.kind}-${idx}`} delay={idx * 0.05}>
                  <div className="relative">
                    <span className="absolute -left-[21px] top-1.5 flex h-3.5 w-3.5 items-center justify-center rounded-full border-2 border-white bg-[var(--gold)] shadow" />
                    <p className="text-xs font-semibold uppercase tracking-wide text-[var(--gold-dark)]">
                      {item.year}
                    </p>
                    <p className="mt-1 font-medium text-[var(--navy)]">{item.title}</p>
                    <p className="text-sm text-[var(--muted)]">{item.place}</p>
                    {item.detail ? (
                      <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">{item.detail}</p>
                    ) : null}
                  </div>
                </FadeIn>
              ))}
            </div>
          </div>

          <div className="mt-12">
            <FadeIn>
              <h3 className="font-[family-name:var(--font-display)] text-2xl text-[var(--navy)]">
                Sertifikalar
              </h3>
            </FadeIn>
            <div className="mt-6 grid gap-4 sm:grid-cols-2">
              {profile.certificates.map((c, i) => (
                <FadeIn key={c.id} delay={i * 0.05}>
                  <GlassPanel className="border border-black/5 bg-white/90 p-5">
                    <p className="text-sm font-semibold text-[var(--navy)]">{c.name}</p>
                    <p className="mt-1 text-xs text-[var(--muted)]">{c.issuer}</p>
                    {c.year ? (
                      <p className="mt-2 text-xs font-medium text-[var(--gold-dark)]">{c.year}</p>
                    ) : null}
                  </GlassPanel>
                </FadeIn>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}