"use client";

import { useState, useMemo } from "react";
import Link from "next/link";
import { useStatements, useParticipants, useUpdateStatement } from "@/lib/hooks";

function formatDate(d: string | null) {
  if (!d) return "—";
  return new Date(d).toLocaleDateString("en-AU", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
}

function formatPeriod(start: string | null, end: string | null) {
  if (!start && !end) return "—";
  const fmt = (d: string) =>
    new Date(d).toLocaleDateString("en-AU", { day: "2-digit", month: "short", year: "2-digit" });
  if (!start) return `until ${fmt(end!)}`;
  if (!end) return `from ${fmt(start)}`;
  return `${fmt(start)} – ${fmt(end)}`;
}

function formatAmount(n: number | null): string {
  if (n === null || n === undefined) return "—";
  return new Intl.NumberFormat("en-AU", {
    style: "currency",
    currency: "AUD",
    minimumFractionDigits: 2,
  }).format(Number(n));
}

const selectCls =
  "bg-zinc-900 border border-zinc-700 rounded text-xs px-2 py-1.5 text-zinc-300 cursor-pointer hover:border-zinc-600 focus:outline-none focus:border-indigo-500";

export default function StatementsPage() {
  const { data: statements, isLoading } = useStatements();
  const { data: participants } = useParticipants();
  const updateStatement = useUpdateStatement();

  const [bankFilter, setBankFilter] = useState("");
  const [typeFilter, setTypeFilter] = useState<"all" | "card" | "bank">("all");
  const [ownerFilter, setOwnerFilter] = useState("");
  const [yearFilter, setYearFilter] = useState("");

  const banks = useMemo(
    () => [...new Set((statements ?? []).map((s) => s.bank_name))].sort(),
    [statements]
  );
  const years = useMemo(
    () =>
      [
        ...new Set(
          (statements ?? [])
            .map((s) => s.billing_end_date?.slice(0, 4))
            .filter(Boolean) as string[]
        ),
      ].sort((a, b) => b.localeCompare(a)),
    [statements]
  );

  const filtered = useMemo(() => {
    if (!statements) return [];
    return statements.filter((s) => {
      const isCard = s.statement_type?.toLowerCase().includes("card") ?? false;
      if (bankFilter && s.bank_name !== bankFilter) return false;
      if (typeFilter === "card" && !isCard) return false;
      if (typeFilter === "bank" && isCard) return false;
      if (ownerFilter && String(s.owner_id) !== ownerFilter) return false;
      if (yearFilter && s.billing_end_date?.slice(0, 4) !== yearFilter) return false;
      return true;
    });
  }, [statements, bankFilter, typeFilter, ownerFilter, yearFilter]);

  const hasFilters = bankFilter || typeFilter !== "all" || ownerFilter || yearFilter;

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-semibold">Statements</h2>
        {!isLoading && statements && (
          <span className="text-xs text-zinc-500">
            {hasFilters ? `${filtered.length} of ${statements.length}` : statements.length} statements
          </span>
        )}
      </div>

      {/* Filters */}
      {!isLoading && statements && (
        <div className="flex flex-wrap gap-2 mb-4">
          <select value={bankFilter} onChange={(e) => setBankFilter(e.target.value)} className={selectCls}>
            <option value="">All banks</option>
            {banks.map((b) => (
              <option key={b} value={b}>{b}</option>
            ))}
          </select>

          <select value={typeFilter} onChange={(e) => setTypeFilter(e.target.value as typeof typeFilter)} className={selectCls}>
            <option value="all">All types</option>
            <option value="card">Credit card</option>
            <option value="bank">Bank account</option>
          </select>

          {participants && participants.length > 1 && (
            <select value={ownerFilter} onChange={(e) => setOwnerFilter(e.target.value)} className={selectCls}>
              <option value="">All owners</option>
              {participants.map((p) => (
                <option key={p.id} value={String(p.id)}>{p.name}</option>
              ))}
            </select>
          )}

          <select value={yearFilter} onChange={(e) => setYearFilter(e.target.value)} className={selectCls}>
            <option value="">All years</option>
            {years.map((y) => (
              <option key={y} value={y}>{y}</option>
            ))}
          </select>

          {hasFilters && (
            <button
              onClick={() => { setBankFilter(""); setTypeFilter("all"); setOwnerFilter(""); setYearFilter(""); }}
              className="text-xs text-zinc-500 hover:text-zinc-300 px-2 py-1.5 transition-colors"
            >
              × Clear
            </button>
          )}
        </div>
      )}

      {isLoading ? (
        <p className="text-zinc-500 text-sm">Loading...</p>
      ) : !filtered.length ? (
        <p className="text-zinc-500 text-sm">{hasFilters ? "No statements match filters" : "No statements found"}</p>
      ) : (
        <div className="border border-zinc-700 rounded-xl overflow-hidden">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-zinc-800 bg-zinc-900">
                <th className="text-left px-3 py-2.5 text-xs text-zinc-600 font-medium w-8">#</th>
                <th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Bank</th>
                <th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Account</th>
                <th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Period</th>
                <th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Due / End</th>
                <th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Ccy</th>
                <th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Amount</th>
                <th className="text-right px-4 py-2.5 text-xs text-zinc-500 font-medium">Txns</th>
                <th className="text-left px-4 py-2.5 text-xs text-zinc-500 font-medium">Owner</th>
                <th className="px-4 py-2.5"></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((s, idx) => {
                const isCreditCard = s.statement_type?.toLowerCase().includes("card") ?? false;
                const displayAmount = isCreditCard ? s.total_amount_due : s.closing_balance;
                const amount = Number(displayAmount);
                const amountColor = isCreditCard
                  ? "text-red-400"
                  : amount >= 0
                  ? "text-green-400"
                  : "text-red-400";

                return (
                  <tr key={s.id} className="border-b border-zinc-800/50 hover:bg-zinc-800/20 transition-colors">
                    <td className="px-3 py-3 text-xs text-zinc-600 tabular-nums">{idx + 1}</td>
                    <td className="px-4 py-3">
                      <div className="font-medium truncate max-w-[180px]" title={s.bank_name}>
                        {s.bank_name}
                      </div>
                      {s.card_name && (
                        <div className="text-xs text-zinc-500 truncate max-w-[180px]">{s.card_name}</div>
                      )}
                    </td>
                    <td className="px-4 py-3 text-zinc-400 font-mono text-xs">
                      {s.account_number}
                    </td>
                    <td className="px-4 py-3 text-zinc-400 whitespace-nowrap">
                      {formatPeriod(s.billing_start_date, s.billing_end_date)}
                    </td>
                    <td className="px-4 py-3 text-zinc-400 whitespace-nowrap">
                      {isCreditCard ? formatDate(s.payment_due_date) : formatDate(s.billing_end_date)}
                    </td>
                    <td className="px-4 py-3 text-zinc-500 text-xs">
                      {s.currency}
                    </td>
                    <td className="px-4 py-3 text-right tabular-nums">
                      {displayAmount !== null && displayAmount !== undefined ? (
                        <span className={amountColor}>{formatAmount(displayAmount)}</span>
                      ) : (
                        <span className="text-zinc-600">—</span>
                      )}
                    </td>
                    <td className="px-4 py-3 text-right text-zinc-500">
                      {s.transaction_count}
                    </td>
                    <td className="px-4 py-3">
                      {participants?.length ? (
                        <select
                          value={s.owner_id ?? ""}
                          onChange={(e) =>
                            updateStatement.mutate({ id: s.id, owner_id: Number(e.target.value) })
                          }
                          className="bg-zinc-800 border border-zinc-700 rounded text-xs px-2 py-1 text-zinc-300 cursor-pointer hover:border-zinc-600 focus:outline-none focus:border-indigo-500"
                        >
                          {participants.map((p) => (
                            <option key={p.id} value={p.id}>{p.name}</option>
                          ))}
                        </select>
                      ) : (
                        <span className="text-zinc-600 text-xs">{s.owner_name}</span>
                      )}
                    </td>
                    <td className="px-4 py-3">
                      <Link
                        href={`/transactions?statement_id=${s.id}`}
                        className="px-3 py-1 bg-zinc-800 hover:bg-zinc-700 rounded text-xs transition-colors whitespace-nowrap"
                      >
                        View →
                      </Link>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}