"use client";
import React, { useState } from "react";
import { Policy } from "@/types";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";
import { Dialog } from "@/components/ui/dialog";

const POLICIES: Policy[] = [
  { policyNo: "HDFC-MOT-2026-8812", customer: "Anil Verma", product: "Private Car Comprehensive", insurer: "HDFC ERGO General Insurance", premium: "₹24,500", freq: "One-time", expiry: "31 Aug 2027", status: "Approved", tag: "tag-ok" },
  { policyNo: "SH-HLT-2026-8823", customer: "Farhan Sheikh", product: "Family Health Optima", insurer: "Star Health & Allied Insurance", premium: "₹18,000", freq: "Annually", expiry: "14 Jun 2027", status: "Approved", tag: "tag-ok" },
  { policyNo: "ICICI-LIFE-2026-0091", customer: "Arvind K.", product: "iSelect Term Plan", insurer: "ICICI Lombard GIC", premium: "₹15,000", freq: "Annually", expiry: "—", status: "Pending Verification", tag: "tag-warn" },
  { policyNo: "ICICI-MOT-2026-1092", customer: "Kavita Joshi", product: "Two-Wheeler Package Policy", insurer: "ICICI Lombard GIC", premium: "₹4,200", freq: "One-time", expiry: "—", status: "Rejected — document unclear", tag: "tag-bad" },
];

export default function PoliciesPage() {
  const [filter, setFilter] = useState<string>("All");
  const [selected, setSelected] = useState<Policy | null>(null);

  const visible = POLICIES.filter((p) => {
    if (filter === "All") return true;
    if (filter === "Pending") return p.tag === "tag-warn";
    if (filter === "Approved") return p.tag === "tag-ok";
    if (filter === "Rejected") return p.tag === "tag-bad";
    return true;
  });

  const getBadgeVariant = (tag: string) => {
    if (tag === "tag-ok") return "ok";
    if (tag === "tag-warn") return "warn";
    if (tag === "tag-bad") return "bad";
    return "default";
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="text-2xl font-extrabold text-[#2E3A3F]">My Policies</h1>
          <p className="text-sm text-[#66767A] mt-1">Everything you&apos;ve submitted, and its verification status.</p>
        </div>
      </div>

      <div className="stat-row grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div className="stat-card bg-white border border-[#E1E6E7] border-l-4 border-l-[#4A7C82] rounded-xl p-4 shadow-xs">
          <div className="lbl text-[11px] font-bold text-[#66767A] uppercase tracking-wider">Approved</div>
          <div className="val text-2xl font-extrabold mt-2 text-[#2E3A3F]">2</div>
        </div>
        <div className="stat-card bg-white border border-[#E1E6E7] border-l-4 border-l-[#92600E] rounded-xl p-4 shadow-xs">
          <div className="lbl text-[11px] font-bold text-[#92600E] uppercase tracking-wider">Pending / Rejected</div>
          <div className="val text-2xl font-extrabold mt-2 text-[#92600E]">1 / 1</div>
        </div>
      </div>

      <div className="flex gap-2 mb-4 overflow-x-auto pb-1">
        {["All", "Pending", "Approved", "Rejected"].map((f) => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={`px-4 py-2 rounded-xl text-xs font-bold transition-all cursor-pointer ${
              filter === f
                ? "bg-[#4A7C82] text-white shadow-xs"
                : "bg-white border border-[#E1E6E7] text-[#66767A] hover:bg-[#EAF1F2]"
            }`}
          >
            {f}
          </button>
        ))}
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Customer</TableHead>
            <TableHead>Product</TableHead>
            <TableHead>Premium</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="text-right">Action</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {visible.map((p) => (
            <TableRow key={p.policyNo}>
              <TableCell className="font-bold text-[#2E3A3F]">{p.customer}</TableCell>
              <TableCell>
                {p.product.split(" ")[0]} · {p.insurer.split(" ")[0]}
              </TableCell>
              <TableCell className="font-medium">
                {p.premium}
                {p.freq === "Annually" ? "/yr" : ""}
              </TableCell>
              <TableCell>
                <Badge variant={getBadgeVariant(p.tag)}>{p.status}</Badge>
              </TableCell>
              <TableCell className="text-right">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setSelected(p)}
                >
                  View
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <Dialog
        isOpen={Boolean(selected)}
        onClose={() => setSelected(null)}
        title={selected?.policyNo}
        description={`${selected?.product} · ${selected?.insurer}`}
        footer={
          <Button variant="outline" onClick={() => setSelected(null)}>
            Close
          </Button>
        }
      >
        {selected && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-xs font-bold text-[#66767A] block mb-1">Customer</label>
                <div className="text-sm font-semibold text-[#2E3A3F]">{selected.customer}</div>
              </div>
              <div>
                <label className="text-xs font-bold text-[#66767A] block mb-1">Status</label>
                <div>
                  <Badge variant={getBadgeVariant(selected.tag)}>{selected.status}</Badge>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-xs font-bold text-[#66767A] block mb-1">Premium</label>
                <div className="text-sm font-bold text-[#2E3A3F]">{selected.premium}</div>
              </div>
              <div>
                <label className="text-xs font-bold text-[#66767A] block mb-1">Frequency</label>
                <div className="text-sm text-[#2E3A3F]">{selected.freq}</div>
              </div>
            </div>

            <div>
              <label className="text-xs font-bold text-[#66767A] block mb-1">Expiry Date</label>
              <div className="text-sm text-[#2E3A3F]">{selected.expiry}</div>
            </div>
          </div>
        )}
      </Dialog>
    </div>
  );
}