import { prisma } from "@/core/db/prisma";
import { verifySession } from "@/core/security/session";
import { Link, redirect } from "@/i18n/routing";
import { getLocale } from "next-intl/server";
import { Plus, Pencil, ArrowLeft, Briefcase } from "lucide-react";
import { DeleteExperienceButton } from "@/features/experience/delete-experience-button";

export default async function AdminExperiencePage() {
  const session = await verifySession();
  const locale = await getLocale();

  if (!session) {
    redirect({ href: "/admin/login", locale });
  }

  const experiences = await prisma.experience.findMany({
    orderBy: { order: "asc" },
  });

  return (
    <div className="min-h-screen bg-muted/10 p-6 lg:p-12">
      <div className="max-w-5xl mx-auto">
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-4">
            <Link
              href="/admin/dashboard"
              className="p-2 rounded-full hover:bg-muted text-muted-foreground transition-colors"
            >
              <ArrowLeft size={20} />
            </Link>
            <div>
              <h1 className="text-3xl font-bold tracking-tight">Work Experience</h1>
              <p className="text-sm text-muted-foreground mt-1">
                Manage your career timeline.
              </p>
            </div>
          </div>
          <Link
            href="/admin/dashboard/experience/create"
            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-foreground text-background font-semibold text-sm shadow-md hover:scale-105 transition-all"
          >
            <Plus size={16} />
            Add Experience
          </Link>
        </div>

        {experiences.length === 0 ? (
          <div className="p-12 text-center flex flex-col items-center bg-card rounded-2xl border border-border/50">
            <Briefcase size={48} className="text-muted-foreground/40 mb-4" />
            <h3 className="text-lg font-bold">No experience entries yet</h3>
            <p className="text-sm text-muted-foreground mb-6">
              Build your career timeline in the CMS.
            </p>
            <Link
              href="/admin/dashboard/experience/create"
              className="px-6 py-2 rounded-xl border border-border hover:bg-muted/50 transition-colors font-medium text-sm"
            >
              Add First Entry
            </Link>
          </div>
        ) : (
          <div className="space-y-4">
            {experiences.map((exp) => (
              <div
                key={exp.id}
                className="group flex items-start justify-between gap-4 p-5 rounded-2xl bg-card border border-border/50 hover:border-accent/30 hover:shadow-md transition-all"
              >
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 mb-1">
                    <span className="text-xs font-mono font-bold text-accent bg-accent/10 px-2.5 py-1 rounded-full">
                      {exp.year}
                    </span>
                    <span className="text-xs text-muted-foreground font-mono">
                      order: {exp.order}
                    </span>
                  </div>
                  <h3 className="font-bold text-base">{exp.title}</h3>
                  <p className="text-sm text-muted-foreground font-medium flex items-center gap-1.5 mt-0.5">
                    <Briefcase size={12} className="text-accent/60" />
                    {exp.company}
                  </p>
                  <p className="text-sm text-muted-foreground mt-2 line-clamp-2 leading-relaxed">
                    {exp.description}
                  </p>
                  {Array.isArray(exp.achievements) && exp.achievements.length > 0 && (
                    <div className="mt-2 flex gap-2 flex-wrap">
                      <span className="text-xs font-mono text-muted-foreground/60">
                        {(exp.achievements as string[]).length} achievements
                      </span>
                    </div>
                  )}
                </div>

                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
                  <Link
                    href={`/admin/dashboard/experience/${exp.id}/edit`}
                    className="p-2 text-muted-foreground hover:text-accent hover:bg-accent/10 rounded-lg transition-colors"
                  >
                    <Pencil size={16} />
                  </Link>
                  <DeleteExperienceButton id={exp.id} />
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
