"use client";

import { useState } from "react";
import { Plus, CreditCard, Edit2, Trash2, RefreshCw, CheckCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CreditCardDialog } from "@/components/credit-cards/CreditCardDialog";
import {
  useCreditCards,
  useDeleteCreditCard,
  useGenerateStatement,
  useMarkStatementPaid,
  type CreditCardWithStatement,
} from "@/hooks/use-credit-cards";
import { formatCents, formatDate } from "@/lib/utils/format";
import type { CreditCard as CreditCardType } from "@prisma/client";

function UtilizationBar({ usedCents, limitCents }: { usedCents: number; limitCents: number }) {
  const pct = limitCents > 0 ? Math.min(100, (usedCents / limitCents) * 100) : 0;
  const color = pct >= 90 ? "bg-red-500" : pct >= 70 ? "bg-amber-500" : "bg-emerald-500";
  return (
    <div className="space-y-1">
      <div className="flex justify-between text-xs text-slate-400">
        <span>{formatCents(usedCents)} used</span>
        <span>{pct.toFixed(0)}%</span>
      </div>
      <div className="h-1.5 w-full bg-slate-700 rounded-full overflow-hidden">
        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
      </div>
      <div className="text-xs text-slate-500">Limit: {formatCents(limitCents)}</div>
    </div>
  );
}

function CardTile({ card, onEdit }: { card: CreditCardWithStatement; onEdit: (c: CreditCardType) => void }) {
  const deleteCard = useDeleteCreditCard();
  const generateStmt = useGenerateStatement();
  const markPaid = useMarkStatementPaid();
  const [showActions, setShowActions] = useState(false);

  const pendingStmt = card.statements[0];
  const usedCents = pendingStmt?.closingBalance ?? 0;

  const handleMarkPaid = () => {
    if (!pendingStmt) return;
    markPaid.mutate({
      cardId: card.id,
      stmtId: pendingStmt.id,
      amountCents: pendingStmt.minimumPayment,
    });
  };

  return (
    <Card
      className="bg-slate-800/50 border-slate-700/50 overflow-hidden relative"
      onMouseEnter={() => setShowActions(true)}
      onMouseLeave={() => setShowActions(false)}
    >
      <div
        className="absolute left-0 top-0 bottom-0 w-1"
        style={{ backgroundColor: card.color ?? "#3b82f6" }}
      />
      <CardContent className="pl-5 pr-4 py-4 space-y-3">
        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2">
              <CreditCard className="h-4 w-4 text-slate-400" />
              <span className="font-semibold text-white">{card.name}</span>
              {card.lastFourDigits && (
                <span className="text-slate-500 text-xs">••{card.lastFourDigits}</span>
              )}
            </div>
            <div className="text-xs text-slate-500 mt-0.5">
              {(card.interestRateBps / 100).toFixed(2)}% APR · Statement day {card.statementDayOfMonth}
            </div>
          </div>

          {showActions && (
            <div className="flex gap-1">
              <button
                onClick={() => onEdit(card)}
                className="p-1.5 rounded-lg bg-slate-700/60 text-slate-400 hover:text-white hover:bg-slate-700 transition-colors"
              >
                <Edit2 className="h-3.5 w-3.5" />
              </button>
              <button
                onClick={() => deleteCard.mutate(card.id)}
                className="p-1.5 rounded-lg bg-slate-700/60 text-slate-400 hover:text-red-400 hover:bg-slate-700 transition-colors"
              >
                <Trash2 className="h-3.5 w-3.5" />
              </button>
            </div>
          )}
        </div>

        <UtilizationBar usedCents={usedCents} limitCents={card.creditLimitCents} />

        {pendingStmt ? (
          <div className="bg-amber-500/10 border border-amber-500/20 rounded-lg px-3 py-2 space-y-1">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium text-amber-400">Statement Due</span>
              <span className="text-xs text-amber-300">{formatDate(pendingStmt.dueDate)}</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-xs text-slate-400">
                Min: {formatCents(pendingStmt.minimumPayment)}
              </span>
              <button
                onClick={handleMarkPaid}
                disabled={markPaid.isPending}
                className="flex items-center gap-1 text-xs text-emerald-400 hover:text-emerald-300 transition-colors"
              >
                <CheckCircle className="h-3.5 w-3.5" />
                Mark Paid
              </button>
            </div>
          </div>
        ) : (
          <button
            onClick={() => generateStmt.mutate(card.id)}
            disabled={generateStmt.isPending}
            className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-300 transition-colors"
          >
            <RefreshCw className="h-3 w-3" />
            Generate Statement
          </button>
        )}
      </CardContent>
    </Card>
  );
}

export default function CreditCardsPage() {
  const { data: cards, isLoading } = useCreditCards();
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<CreditCardType | undefined>();

  const totalLimit = cards?.reduce((s, c) => s + c.creditLimitCents, 0) ?? 0;
  const totalUsed = cards?.reduce((s, c) => s + (c.statements[0]?.closingBalance ?? 0), 0) ?? 0;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Credit Cards</h1>
          {cards && cards.length > 0 && (
            <p className="text-slate-400 text-sm mt-1">
              {formatCents(totalUsed)} used of {formatCents(totalLimit)} total limit
            </p>
          )}
        </div>
        <Button
          onClick={() => { setEditing(undefined); setDialogOpen(true); }}
          className="bg-emerald-600 hover:bg-emerald-500 text-white"
        >
          <Plus className="h-4 w-4 mr-2" />
          Add Card
        </Button>
      </div>

      {isLoading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="h-48 bg-slate-800/30 rounded-xl animate-pulse" />
          ))}
        </div>
      ) : !cards || cards.length === 0 ? (
        <Card className="bg-slate-800/30 border-slate-700/50 border-dashed">
          <CardContent className="flex flex-col items-center justify-center py-16 text-center">
            <CreditCard className="h-10 w-10 text-slate-600 mb-3" />
            <p className="text-slate-400 font-medium">No credit cards yet</p>
            <p className="text-slate-500 text-sm mt-1">
              Add a card to track utilization and due dates
            </p>
            <Button
              onClick={() => setDialogOpen(true)}
              className="mt-4 bg-emerald-600 hover:bg-emerald-500 text-white"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Card
            </Button>
          </CardContent>
        </Card>
      ) : (
        <>
          {cards.length > 1 && (
            <Card className="bg-slate-800/50 border-slate-700/50">
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-slate-400">Overall Utilization</CardTitle>
              </CardHeader>
              <CardContent>
                <UtilizationBar usedCents={totalUsed} limitCents={totalLimit} />
              </CardContent>
            </Card>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {cards.map((card) => (
              <CardTile
                key={card.id}
                card={card}
                onEdit={(c) => { setEditing(c); setDialogOpen(true); }}
              />
            ))}
          </div>
        </>
      )}

      <CreditCardDialog
        open={dialogOpen}
        onOpenChange={(v) => { setDialogOpen(v); if (!v) setEditing(undefined); }}
        existing={editing}
      />
    </div>
  );
}