"use client";

import { useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowRight, FileText, Plus } from "lucide-react";

import { Button } from "@/components/ui/button";
import { getArchetypeById } from "@/data/archetypes";
import { getPackageById } from "@/data/packages";
import { useAuthStore } from "@/stores/auth-store";
import { useReportStore } from "@/stores/report-store";
import { cn } from "@/lib/utils";

export default function ReportsPage() {
  const router = useRouter();
  const { user } = useAuthStore();
  const { reports, loadReports } = useReportStore();

  useEffect(() => {
    if (user) {
      loadReports(user.id);
    }
  }, [user, loadReports]);

  if (!user) return null;

  if (reports.length === 0) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-extrabold text-gray-900 mb-1">My Reports</h1>
          <p className="text-gray-500 text-sm">Your personalised health reports</p>
        </div>

        <div className="rounded-2xl border-2 border-dashed border-gray-200 bg-white p-12 flex flex-col items-center justify-center text-center gap-4">
          <div className="h-16 w-16 rounded-full bg-teal-50 flex items-center justify-center">
            <FileText className="h-8 w-8 text-teal-600" />
          </div>
          <div>
            <h2 className="text-xl font-bold text-gray-800 mb-2">No reports yet</h2>
            <p className="text-gray-500 text-sm max-w-sm">
              Complete the assessment and purchase a report package to unlock your personalised
              metabolic health report.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-3">
            <Link href="/quiz">
              <Button className="bg-teal-600 hover:bg-teal-700 text-white rounded-xl">
                <Plus className="h-4 w-4 mr-1.5" />
                Take Assessment
              </Button>
            </Link>
            <Link href="/result/unlock">
              <Button variant="outline" className="rounded-xl border-teal-200 text-teal-700 hover:bg-teal-50">
                Purchase Report
              </Button>
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-extrabold text-gray-900 mb-1">My Reports</h1>
          <p className="text-gray-500 text-sm">
            {reports.length} report{reports.length !== 1 ? "s" : ""} available
          </p>
        </div>
        <Link href="/quiz">
          <Button size="sm" variant="outline" className="rounded-xl border-gray-200 text-gray-600 hover:bg-gray-50">
            <Plus className="h-3.5 w-3.5 mr-1.5" />
            New Report
          </Button>
        </Link>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {reports.map((report) => {
          const archetype = getArchetypeById(report.archetypeId);
          const pkg = getPackageById(report.tier);
          const date = new Date(report.generatedAt).toLocaleDateString("en-GB", {
            day: "numeric",
            month: "short",
            year: "numeric",
          });

          return (
            <div
              key={report.id}
              className="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow group"
            >
              {/* Archetype color banner */}
              <div
                className="h-24 relative"
                style={{
                  background: archetype
                    ? `linear-gradient(135deg, ${archetype.color}ee, ${archetype.color}88)`
                    : "linear-gradient(135deg, #0F766E, #0d9488)",
                }}
              >
                <div className="absolute inset-0 flex items-end p-4">
                  <div>
                    <p className="text-white/70 text-xs font-semibold uppercase tracking-wider mb-0.5">
                      Metabolic Report
                    </p>
                    <p className="text-white font-bold text-sm leading-tight">
                      {archetype?.name ?? report.archetypeId}
                    </p>
                  </div>
                </div>
              </div>

              {/* Card body */}
              <div className="p-4">
                <div className="flex items-center justify-between mb-3">
                  <span
                    className={cn(
                      "text-xs font-bold px-2.5 py-1 rounded-full capitalize",
                      report.tier === "professional"
                        ? "bg-purple-100 text-purple-700"
                        : report.tier === "advanced"
                          ? "bg-teal-100 text-teal-700"
                          : "bg-blue-100 text-blue-700",
                    )}
                  >
                    {pkg?.name ?? report.tier} Report
                  </span>
                  <span className="text-xs text-gray-400">{date}</span>
                </div>

                <p className="text-xs text-gray-400 mb-4">
                  {pkg?.features.length ?? 0} sections •{" "}
                  {archetype?.tagline ?? "Personalised analysis"}
                </p>

                <Link href={`/dashboard/reports/${report.id}`}>
                  <Button className="w-full bg-gray-900 hover:bg-gray-800 text-white rounded-xl text-sm py-2 group-hover:bg-teal-600 group-hover:hover:bg-teal-700 transition-colors">
                    View Report
                    <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
                  </Button>
                </Link>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}