"use client";

import { ArrowLeft, ShieldAlert, ShieldCheck } from "lucide-react";
import Link from "next/link";
import { use } from "react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ARCHETYPES } from "@/data/archetypes";
import { DEMO_TRANSACTIONS } from "@/data/transactions";
import { DEMO_USERS } from "@/data/users";

interface PageProps {
  params: Promise<{ id: string }>;
}

export default function UserDetailPage({ params }: PageProps) {
  const { id } = use(params);
  const user = DEMO_USERS.find((u) => u.id === id);

  if (!user) {
    return (
      <div className="flex flex-col items-center justify-center p-12 text-center">
        <ShieldAlert className="h-10 w-10 text-gray-300 mb-3" />
        <p className="text-sm font-medium text-gray-500">User not found</p>
        <Link href="/admin/users" className="mt-4">
          <Button variant="outline" size="sm" className="gap-2">
            <ArrowLeft className="h-4 w-4" />
            Back to Users
          </Button>
        </Link>
      </div>
    );
  }

  const archetype = user.archetypeResult?.primaryArchetype
    ? ARCHETYPES.find((a) => a.id === user.archetypeResult!.primaryArchetype)
    : undefined;

  const secondaryArchetype = user.archetypeResult?.secondaryArchetype
    ? ARCHETYPES.find((a) => a.id === user.archetypeResult!.secondaryArchetype)
    : undefined;

  const userTransactions = DEMO_TRANSACTIONS.filter((t) => t.userId === user.id);

  const statusStyles: Record<string, string> = {
    active: "bg-emerald-50 text-emerald-700 border-emerald-200",
    suspended: "bg-red-50 text-red-600 border-red-200",
    pending: "bg-amber-50 text-amber-700 border-amber-200",
  };

  const packageStyles: Record<string, string> = {
    starter: "bg-blue-50 text-blue-700 border-blue-200",
    advanced: "bg-teal-50 text-teal-700 border-teal-200",
    professional: "bg-violet-50 text-violet-700 border-violet-200",
  };

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex items-start gap-4">
        <Link href="/admin/users">
          <Button variant="outline" size="sm" className="gap-2 mt-1">
            <ArrowLeft className="h-4 w-4" />
            Back
          </Button>
        </Link>
        <div className="flex flex-1 items-center justify-between">
          <div className="flex items-center gap-4">
            <div
              className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-lg font-bold text-white"
              style={{ backgroundColor: archetype?.color ?? "#0F766E" }}
            >
              {user.firstName[0]}{user.lastName[0]}
            </div>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">{user.firstName} {user.lastName}</h1>
              <p className="text-sm text-gray-500">{user.email}</p>
              <div className="mt-1 flex flex-wrap gap-2">
                <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium capitalize ${statusStyles[user.status] ?? ""}`}>
                  {user.status}
                </span>
                {user.purchasedPackage && (
                  <span className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium capitalize ${packageStyles[user.purchasedPackage] ?? ""}`}>
                    {user.purchasedPackage}
                  </span>
                )}
                {archetype && (
                  <span
                    className="inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium"
                    style={{ backgroundColor: archetype.color + "22", color: archetype.color, borderColor: archetype.color + "44" }}
                  >
                    {archetype.name}
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <Tabs defaultValue="profile">
        <TabsList className="border-b border-gray-200 bg-transparent p-0 h-auto rounded-none gap-0">
          {["profile", "assessment", "reports", "billing"].map((tab) => (
            <TabsTrigger
              key={tab}
              value={tab}
              className="rounded-none border-b-2 border-transparent px-4 py-2 text-sm font-medium capitalize text-gray-500 data-[state=active]:border-teal-600 data-[state=active]:text-teal-700 data-[state=active]:shadow-none"
            >
              {tab}
            </TabsTrigger>
          ))}
        </TabsList>

        {/* Profile Tab */}
        <TabsContent value="profile" className="mt-6 space-y-4">
          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-semibold">Account Details</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm">
                {[
                  ["User ID", user.id],
                  ["Email", user.email],
                  ["First Name", user.firstName],
                  ["Last Name", user.lastName],
                  ["Joined", new Date(user.createdAt).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })],
                  ["Package", user.purchasedPackage ?? "None"],
                  ["Subscription", user.subscriptionStatus ?? "None"],
                  ["Reports", user.reportIds.length.toString()],
                ].map(([label, val]) => (
                  <div key={label} className="flex justify-between border-b border-gray-50 pb-2">
                    <span className="text-gray-500">{label}</span>
                    <span className="font-medium text-gray-900">{val}</span>
                  </div>
                ))}
              </CardContent>
            </Card>

            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-semibold">Account Status</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between rounded-lg border border-gray-100 p-4">
                  <div className="flex items-center gap-3">
                    {user.status === "active" ? (
                      <ShieldCheck className="h-5 w-5 text-emerald-600" />
                    ) : (
                      <ShieldAlert className="h-5 w-5 text-red-500" />
                    )}
                    <div>
                      <p className="text-sm font-semibold capitalize text-gray-900">{user.status}</p>
                      <p className="text-xs text-gray-400">Current account status</p>
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    className="text-xs"
                    onClick={() => toast.info("In PoC — action simulated", { description: `Toggle account status for ${user.email}` })}
                  >
                    {user.status === "active" ? "Suspend" : "Activate"}
                  </Button>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full text-xs"
                  onClick={() => toast.info("In PoC — action simulated", { description: `Password reset sent to ${user.email}` })}
                >
                  Send Password Reset
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Assessment Tab */}
        <TabsContent value="assessment" className="mt-6 space-y-4">
          {!user.archetypeResult ? (
            <Card>
              <CardContent className="flex flex-col items-center justify-center py-12 text-center">
                <p className="text-sm text-gray-500">No assessment completed yet</p>
              </CardContent>
            </Card>
          ) : (
            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm font-semibold">Archetype Result</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {archetype && (
                    <div className="flex items-center gap-3 rounded-lg p-3" style={{ backgroundColor: archetype.color + "11" }}>
                      <div className="h-10 w-10 shrink-0 rounded-full" style={{ backgroundColor: archetype.color }} />
                      <div>
                        <p className="font-bold" style={{ color: archetype.color }}>{archetype.name}</p>
                        <p className="text-xs text-gray-500">{archetype.tagline}</p>
                      </div>
                    </div>
                  )}
                  {secondaryArchetype && (
                    <div>
                      <p className="mb-1 text-xs text-gray-500">Secondary Archetype</p>
                      <p className="text-sm font-medium" style={{ color: secondaryArchetype.color }}>{secondaryArchetype.name}</p>
                    </div>
                  )}
                  <div className="grid grid-cols-2 gap-3 text-sm">
                    <div className="rounded-lg bg-gray-50 p-3">
                      <p className="text-xs text-gray-500">BMI</p>
                      <p className="text-lg font-bold text-gray-900">{user.archetypeResult.bmi}</p>
                      <p className="text-xs text-gray-400 capitalize">{user.archetypeResult.bmiCategory}</p>
                    </div>
                    <div className="rounded-lg bg-gray-50 p-3">
                      <p className="text-xs text-gray-500">GLP-1 Score</p>
                      <p className="text-lg font-bold text-gray-900">{user.archetypeResult.glp1Score}</p>
                      <p className={`text-xs font-medium ${user.archetypeResult.glp1Eligible ? "text-amber-600" : "text-gray-400"}`}>
                        {user.archetypeResult.glp1Eligible ? "Eligible" : "Not Eligible"}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm font-semibold">Archetype Scores</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {Object.entries(user.archetypeResult.scores)
                    .sort(([, a], [, b]) => b - a)
                    .map(([archetypeId, score]) => {
                      const a = ARCHETYPES.find((x) => x.id === archetypeId);
                      const maxScore = Math.max(...Object.values(user.archetypeResult!.scores));
                      const pct = maxScore > 0 ? (score / maxScore) * 100 : 0;
                      return (
                        <div key={archetypeId}>
                          <div className="mb-1 flex justify-between text-xs">
                            <span className="text-gray-600">{a?.name.replace("The ", "") ?? archetypeId}</span>
                            <span className="font-semibold text-gray-800">{score}</span>
                          </div>
                          <div className="h-2 rounded-full bg-gray-100">
                            <div
                              className="h-2 rounded-full transition-all"
                              style={{ width: `${pct}%`, backgroundColor: a?.color ?? "#0F766E" }}
                            />
                          </div>
                        </div>
                      );
                    })}
                </CardContent>
              </Card>

              <Card className="lg:col-span-2">
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm font-semibold">Quiz Answers Summary</CardTitle>
                </CardHeader>
                <CardContent>
                  {user.quizSession?.answers ? (
                    <div className="grid grid-cols-2 gap-2 text-sm sm:grid-cols-3">
                      {Object.entries(user.quizSession.answers).map(([key, val]) => (
                        <div key={key} className="rounded-lg bg-gray-50 p-2.5">
                          <p className="text-[10px] text-gray-400 uppercase tracking-wide">{key.replace("q_", "").replace(/_/g, " ")}</p>
                          <p className="mt-0.5 font-medium text-gray-800 text-xs truncate">
                            {Array.isArray(val) ? val.join(", ") : String(val)}
                          </p>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-sm text-gray-400">No quiz answers available</p>
                  )}
                </CardContent>
              </Card>
            </div>
          )}
        </TabsContent>

        {/* Reports Tab */}
        <TabsContent value="reports" className="mt-6">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-semibold">Generated Reports</CardTitle>
            </CardHeader>
            <CardContent>
              {user.reportIds.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-10 text-center">
                  <p className="text-sm text-gray-500">No reports generated yet</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {user.reportIds.map((rid) => (
                    <div key={rid} className="flex items-center justify-between rounded-lg border border-gray-100 p-4">
                      <div>
                        <p className="text-sm font-medium text-gray-900">Report {rid}</p>
                        <p className="text-xs text-gray-400">
                          {archetype?.name ?? "—"} · {user.purchasedPackage ?? "—"} tier
                        </p>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-xs"
                          onClick={() => toast.info("In PoC mode — report viewer navigation simulated")}
                        >
                          View
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-xs"
                          onClick={() => toast.info("Report regeneration queued (PoC)")}
                        >
                          Regenerate
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Billing Tab */}
        <TabsContent value="billing" className="mt-6">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-semibold">Transaction History</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              {userTransactions.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-10 text-center">
                  <p className="text-sm text-gray-500">No transactions found</p>
                </div>
              ) : (
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-gray-100 bg-gray-50/50">
                      <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500">ID</th>
                      <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500">Description</th>
                      <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500">Amount</th>
                      <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500">Status</th>
                      <th className="px-4 py-2.5 text-left text-xs font-medium text-gray-500">Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {userTransactions.map((txn) => (
                      <tr key={txn.id} className="border-b border-gray-50">
                        <td className="px-4 py-3 font-mono text-xs text-gray-500">{txn.id}</td>
                        <td className="px-4 py-3 text-xs text-gray-700">{txn.description}</td>
                        <td className="px-4 py-3 text-sm font-semibold text-gray-900">CHF {txn.amount}</td>
                        <td className="px-4 py-3">
                          <Badge
                            className={`text-[10px] border ${
                              txn.status === "succeeded" ? "bg-emerald-50 text-emerald-700 border-emerald-200" :
                              txn.status === "failed" ? "bg-red-50 text-red-600 border-red-200" :
                              "bg-amber-50 text-amber-700 border-amber-200"
                            }`}
                          >
                            {txn.status}
                          </Badge>
                        </td>
                        <td className="px-4 py-3 text-xs text-gray-500">
                          {new Date(txn.createdAt).toLocaleDateString("en-GB")}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}