import { notFound } from "next/navigation";
import Link from "next/link";
import { Shell } from "@/components/Shell";
import { Avatar } from "@/components/Avatar";
import { db, people } from "@/db";
import { eq } from "drizzle-orm";
import { officeLabel, fullName, fmtDate, yearsAt } from "@/lib/format";
import { auth } from "@/auth";

export default async function PersonPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const person = await db.query.people.findFirst({
    where: eq(people.slug, slug),
    with: {
      skills: { with: { skill: true }, orderBy: (ps, { desc }) => desc(ps.level) },
      assignments: { with: { project: { with: { client: true, caseStudy: true } } }, orderBy: (a, { desc }) => desc(a.lastSeen) },
      showcaseItems: true,
    },
  });
  if (!person) notFound();
  const session = await auth();
  const isMe = session?.user?.personSlug === slug;
  const years = yearsAt(person.startedAt);
  const totalHours = Math.round(person.assignments.reduce((a, b) => a + b.hours, 0));
  const clients = [...new Set(person.assignments.map((a) => a.project.client?.name).filter(Boolean))];
  const verticals = [...new Set(person.assignments.map((a) => a.project.client?.vertical).filter(Boolean))];
  const byCat = (cat: string) => person.skills.filter((s) => s.skill.category === cat);

  return (
    <Shell>
      <section className="grain bg-ink text-white">
        <div className="mx-auto max-w-7xl px-5 py-14 flex flex-col md:flex-row gap-8 md:items-end">
          <Avatar person={person} size={168} className="ring-4 ring-white/10" />
          <div className="flex-1">
            <p className="eyebrow text-white/60">{person.department} · {officeLabel[person.office]}{years !== null && ` · ${years} yr${years === 1 ? "" : "s"} at CP`}</p>
            <h1 className="display mt-2">{person.firstName} <span className="serif-i">{person.lastName}</span></h1>
            <p className="mt-2 text-xl text-white/80">{person.title}</p>
            <div className="mt-5 flex flex-wrap gap-2">
              <a href={`mailto:${person.email}`} className="btn btn-soul">Email</a>
              {person.linkedinUrl && <a href={person.linkedinUrl} target="_blank" rel="noreferrer" className="btn border border-white/25 text-white hover:bg-white hover:text-ink">LinkedIn ↗</a>}
              {isMe && <Link href="/me" className="btn border border-white/25 text-white hover:bg-white hover:text-ink">Edit my profile</Link>}
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-12 grid gap-12 lg:grid-cols-[2fr_1fr]">
        <div className="space-y-12">
          {person.bio && <p className="text-2xl leading-snug max-w-3xl">{person.bio}</p>}

          <div>
            <h2 className="eyebrow mb-4">Project history <span className="normal-case tracking-normal text-mist">· from Workamajig</span></h2>
            {person.assignments.length === 0 && <p className="text-ink/60">No projects synced yet.</p>}
            <ul className="divide-y divide-line border-t border-line">
              {person.assignments.map((a) => (
                <li key={a.id} className="py-4 grid gap-1 sm:grid-cols-[1fr_auto] sm:items-center">
                  <div>
                    <p className="font-medium">
                      {a.project.caseStudy ? <Link href={`/case-studies/${a.project.caseStudy.slug}`} className="hover:text-soul">{a.project.name}</Link> : a.project.name}
                      {a.project.status === "Active" && <span className="ml-2 chip chip-soul">live</span>}
                    </p>
                    <p className="text-sm text-ink/60">{a.project.client?.name ?? "Internal"}{a.role && ` · ${a.role}`}{a.project.services.length > 0 && ` · ${a.project.services.join(", ")}`}</p>
                  </div>
                  <p className="text-sm text-mist sm:text-right">{fmtDate(a.firstSeen)}{a.lastSeen && a.project.status !== "Active" ? ` – ${fmtDate(a.lastSeen)}` : " – now"}<br /><span className="text-xs">{Math.round(a.hours)} hrs</span></p>
                </li>
              ))}
            </ul>
          </div>

          {person.showcaseItems.length > 0 && (
            <div>
              <h2 className="eyebrow mb-4">In the showcase</h2>
              <div className="grid gap-3 sm:grid-cols-2">
                {person.showcaseItems.map((s) => (
                  <Link key={s.id} href={`/showcase/${s.slug}`} className="card p-4 block"><p className="font-medium">{s.title}</p><p className="text-sm text-ink/60">{s.blurb}</p></Link>
                ))}
              </div>
            </div>
          )}
        </div>

        <aside className="space-y-8">
          <div className="card p-5">
            <h3 className="eyebrow mb-3">At a glance</h3>
            <dl className="text-sm space-y-2">
              <div className="flex justify-between"><dt className="text-mist">Projects</dt><dd>{person.assignments.length}</dd></div>
              <div className="flex justify-between"><dt className="text-mist">Hours logged</dt><dd>{totalHours.toLocaleString()}</dd></div>
              <div className="flex justify-between"><dt className="text-mist">Clients</dt><dd className="text-right">{clients.length}</dd></div>
              <div className="flex justify-between"><dt className="text-mist">Started</dt><dd>{fmtDate(person.startedAt) || "—"}</dd></div>
            </dl>
          </div>
          {(["craft", "tool", "language"] as const).map((cat) => byCat(cat).length > 0 && (
            <div key={cat}>
              <h3 className="eyebrow mb-3">{cat === "craft" ? "Skills" : cat === "tool" ? "Tools" : "Languages"}</h3>
              <ul className="space-y-1.5">
                {byCat(cat).map((s) => (
                  <li key={s.skillId} className="flex items-center justify-between text-sm">
                    <span>{s.skill.name}</span>
                    <span className="flex gap-0.5" aria-label={`${s.level} of 5`}>{[1, 2, 3, 4, 5].map((i) => <span key={i} className={`h-1.5 w-3 rounded-sm ${i <= s.level ? "bg-soul" : "bg-line"}`} />)}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          {verticals.length > 0 && (
            <div>
              <h3 className="eyebrow mb-3">Vertical experience</h3>
              <div className="flex flex-wrap gap-1.5">{verticals.map((v) => <span key={v} className="chip">{v}</span>)}</div>
            </div>
          )}
          {person.interests.length > 0 && (
            <div>
              <h3 className="eyebrow mb-3">Interests</h3>
              <div className="flex flex-wrap gap-1.5">{person.interests.map((v) => <Link key={v} href={`/people?q=${encodeURIComponent(v)}`} className="chip hover:border-ink">{v}</Link>)}</div>
            </div>
          )}
        </aside>
      </section>
    </Shell>
  );
}