"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  AlertCircle,
  ArrowDownRight,
  ArrowUpRight,
  Banknote,
  Building2,
  CircleDollarSign,
  CreditCard,
  Crown,
  ExternalLink,
  Receipt,
  Wallet,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { FinancialReport, ReportPeriod } from "@/lib/appwrite/finance-report-queries";
import { formatDate, formatTRY } from "@/lib/format";
import { cn } from "@/lib/utils";

const PERIOD_LABEL: Record<ReportPeriod, string> = {
  month: "Bu ay",
  quarter: "Bu çeyrek",
  year: "Bu yıl",
  all: "Tüm zamanlar",
};

const STATUS_LABEL: Record<"pending" | "partial" | "overdue", string> = {
  pending: "Bekliyor",
  partial: "Kısmi",
  overdue: "Gecikti",
};

const STATUS_COLOR: Record<"pending" | "partial" | "overdue", string> = {
  pending: "bg-blue-500/15 text-blue-700 dark:text-blue-300 border-blue-500/30",
  partial: "bg-amber-500/15 text-amber-800 dark:text-amber-300 border-amber-500/30",
  overdue: "bg-red-500/15 text-red-700 dark:text-red-300 border-red-500/30",
};

export function ReportClient({ data }: { data: FinancialReport }) {
  const router = useRouter();

  const setPeriod = (p: ReportPeriod) => {
    const params = new URLSearchParams();
    if (p !== "month") params.set("period", p);
    router.push(`/finance/reports${params.size ? `?${params}` : ""}`);
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <Select value={data.period} onValueChange={(v) => setPeriod(v as ReportPeriod)}>
          <SelectTrigger className="w-[200px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="month">{PERIOD_LABEL.month}</SelectItem>
            <SelectItem value="quarter">{PERIOD_LABEL.quarter}</SelectItem>
            <SelectItem value="year">{PERIOD_LABEL.year}</SelectItem>
            <SelectItem value="all">{PERIOD_LABEL.all}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* KPIs */}
      <div className="grid gap-4 md:grid-cols-4">
        <KpiCard
          label="Nakit pozisyonu"
          value={formatTRY(data.kpi.cashPosition)}
          tone={data.kpi.cashPosition >= 0 ? "positive" : "negative"}
          icon={CircleDollarSign}
          subtitle="Banka + alacaklar − borçlar"
        />
        <KpiCard
          label={`${PERIOD_LABEL[data.period]} geliri`}
          value={formatTRY(data.kpi.income)}
          tone="positive"
          icon={ArrowUpRight}
        />
        <KpiCard
          label={`${PERIOD_LABEL[data.period]} gideri`}
          value={formatTRY(data.kpi.expense)}
          tone="negative"
          icon={ArrowDownRight}
        />
        <KpiCard
          label="Net"
          value={formatTRY(data.kpi.net)}
          tone={data.kpi.net >= 0 ? "positive" : "negative"}
          icon={Wallet}
        />
      </div>

      {/* Cash composition */}
      <Card>
        <CardHeader>
          <CardTitle>Nakit pozisyonu detayı</CardTitle>
          <CardDescription>
            Bugünkü gerçek nakit + tahsil edilebilir − ödenecek borçlar
          </CardDescription>
        </CardHeader>
        <CardContent>
          <CompositionRow
            icon={Building2}
            label="Banka hesapları"
            sign="+"
            amount={data.composition.bankBalances}
            href="/finance/banks"
          />
          <CompositionRow
            icon={Receipt}
            label="Bekleyen tahsilatlar"
            sign="+"
            amount={data.composition.receivables}
            href="/invoices"
          />
          <CompositionRow
            icon={Banknote}
            label="Kredi kalan ödemeler"
            sign="−"
            amount={data.composition.loanRemaining}
            href="/finance/loans"
          />
          <CompositionRow
            icon={CreditCard}
            label="Kart ekstre borçları"
            sign="−"
            amount={data.composition.cardOutstanding}
            href="/finance/cards"
          />
          <div className="mt-3 flex items-center justify-between border-t pt-3">
            <span className="text-sm font-semibold">Net pozisyon</span>
            <span
              className={cn(
                "text-lg font-semibold tabular-nums",
                data.kpi.cashPosition >= 0
                  ? "text-emerald-600 dark:text-emerald-400"
                  : "text-red-600 dark:text-red-400",
              )}
            >
              {formatTRY(data.kpi.cashPosition)}
            </span>
          </div>
        </CardContent>
      </Card>

      {/* Trend chart */}
      <TrendChartLazy data={data.trend} />

      {/* Top customers + Expense breakdown */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Crown className="size-4" />
              En çok ciro yapan müşteriler
            </CardTitle>
            <CardDescription>
              {PERIOD_LABEL[data.period]} ödenmiş faturalara göre
            </CardDescription>
          </CardHeader>
          <CardContent>
            {data.topCustomers.length === 0 ? (
              <p className="text-muted-foreground py-6 text-center text-sm">
                Bu dönemde ödenmiş fatura yok.
              </p>
            ) : (
              <ul className="space-y-3">
                {data.topCustomers.map((c, i) => {
                  const max = data.topCustomers[0]?.total ?? 1;
                  const w = (c.total / max) * 100;
                  return (
                    <li key={c.name + i} className="space-y-1.5">
                      <div className="flex items-center justify-between gap-3">
                        <span className="truncate text-sm">
                          <span className="text-muted-foreground mr-2 tabular-nums">
                            {String(i + 1).padStart(2, "0")}
                          </span>
                          {c.name}
                        </span>
                        <span className="text-sm tabular-nums">{formatTRY(c.total)}</span>
                      </div>
                      <div className="bg-muted h-1.5 overflow-hidden rounded-full">
                        <div
                          className="bg-emerald-500 h-full"
                          style={{ width: `${w}%` }}
                        />
                      </div>
                    </li>
                  );
                })}
              </ul>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Gider dağılımı</CardTitle>
            <CardDescription>{PERIOD_LABEL[data.period]} kaynak bazında</CardDescription>
          </CardHeader>
          <CardContent>
            <ExpenseRow
              label="Kredi taksit ödemeleri"
              amount={data.expenseBreakdown.loans}
              total={data.kpi.expense}
              color="bg-amber-500"
            />
            <ExpenseRow
              label="Kredi kartı ödemeleri"
              amount={data.expenseBreakdown.cards}
              total={data.kpi.expense}
              color="bg-violet-500"
            />
            <ExpenseRow
              label="Diğer (manuel) gider"
              amount={data.expenseBreakdown.other}
              total={data.kpi.expense}
              color="bg-red-500"
            />
            {data.kpi.expense === 0 && (
              <p className="text-muted-foreground py-2 text-center text-sm">
                Bu dönemde gider yok.
              </p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Loans + Cards summary */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Banknote className="size-4" />
                Aktif krediler
              </CardTitle>
              <CardDescription>Kalan ödeme tutarına göre</CardDescription>
            </div>
            <Link
              href="/finance/loans"
              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
            >
              Tümü <ExternalLink className="size-3" />
            </Link>
          </CardHeader>
          <CardContent>
            {data.loans.length === 0 ? (
              <p className="text-muted-foreground py-6 text-center text-sm">
                Aktif kredi yok.
              </p>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Kredi</TableHead>
                    <TableHead className="text-right">Aylık</TableHead>
                    <TableHead className="text-right">Kalan</TableHead>
                    <TableHead>Sonraki</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.loans.map((l) => (
                    <TableRow key={l.id}>
                      <TableCell>
                        <span className="block font-medium">{l.bankName}</span>
                        <span className="text-muted-foreground text-xs">{l.loanName}</span>
                      </TableCell>
                      <TableCell className="text-right tabular-nums">
                        {formatTRY(l.monthlyPayment)}
                      </TableCell>
                      <TableCell className="text-right font-medium tabular-nums">
                        {formatTRY(l.remaining)}
                      </TableCell>
                      <TableCell className="text-muted-foreground text-sm">
                        {l.nextDue ? formatDate(l.nextDue) : "—"}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <CreditCard className="size-4" />
                Kart ekstreleri
              </CardTitle>
              <CardDescription>Bekleyen ve gecikmiş ödemeler</CardDescription>
            </div>
            <Link
              href="/finance/cards"
              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
            >
              Tümü <ExternalLink className="size-3" />
            </Link>
          </CardHeader>
          <CardContent>
            {data.cardStatements.length === 0 ? (
              <p className="text-muted-foreground py-6 text-center text-sm">
                Açık ekstre yok.
              </p>
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Kart</TableHead>
                    <TableHead>Vade</TableHead>
                    <TableHead className="text-right">Kalan</TableHead>
                    <TableHead>Durum</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.cardStatements.map((s) => (
                    <TableRow key={s.id}>
                      <TableCell>
                        <span className="block text-sm font-medium">{s.cardLabel}</span>
                        <span className="text-muted-foreground font-mono text-xs">
                          {s.period}
                        </span>
                      </TableCell>
                      <TableCell className="text-muted-foreground text-sm">
                        {formatDate(s.dueDate)}
                      </TableCell>
                      <TableCell className="text-right font-medium tabular-nums">
                        {formatTRY(s.remaining)}
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className={cn("border-0", STATUS_COLOR[s.status])}>
                          {STATUS_LABEL[s.status]}
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Outstanding invoices */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Receipt className="size-4" />
              Bekleyen faturalar
            </CardTitle>
            <CardDescription>
              Tahsil edilmesi gereken — vadesi geçmiş olanlar üstte
            </CardDescription>
          </div>
          <Link
            href="/invoices"
            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs"
          >
            Tümü <ExternalLink className="size-3" />
          </Link>
        </CardHeader>
        <CardContent>
          {data.outstandingInvoices.length === 0 ? (
            <p className="text-muted-foreground py-6 text-center text-sm">
              Bekleyen fatura yok.
            </p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Numara</TableHead>
                  <TableHead>Müşteri</TableHead>
                  <TableHead>Vade</TableHead>
                  <TableHead className="text-right">Tutar</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {data.outstandingInvoices.map((inv) => (
                  <TableRow key={inv.id}>
                    <TableCell>
                      <Link
                        href={`/invoices/${inv.id}`}
                        className="hover:text-primary inline-flex items-center gap-1 font-mono text-sm"
                      >
                        {inv.number}
                      </Link>
                    </TableCell>
                    <TableCell>{inv.customerName}</TableCell>
                    <TableCell
                      className={cn(
                        "text-sm",
                        inv.overdue
                          ? "text-destructive flex items-center gap-1 font-medium"
                          : "text-muted-foreground",
                      )}
                    >
                      {inv.overdue && <AlertCircle className="size-3" />}
                      {formatDate(inv.dueDate)}
                    </TableCell>
                    <TableCell className="text-right font-medium tabular-nums">
                      {formatTRY(inv.total)}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function KpiCard({
  label,
  value,
  tone,
  icon: Icon,
  subtitle,
}: {
  label: string;
  value: string;
  tone: "positive" | "negative" | "neutral";
  icon: typeof Wallet;
  subtitle?: string;
}) {
  const cls = {
    positive: "text-emerald-600 dark:text-emerald-400",
    negative: "text-red-600 dark:text-red-400",
    neutral: "text-muted-foreground",
  }[tone];
  return (
    <Card>
      <CardContent className="flex items-start justify-between p-5">
        <div>
          <p className="text-muted-foreground text-xs uppercase tracking-wide">{label}</p>
          <p className={cn("mt-2 text-2xl font-semibold tabular-nums", cls)}>{value}</p>
          {subtitle && <p className="text-muted-foreground mt-1 text-xs">{subtitle}</p>}
        </div>
        <Icon className={cn("size-5", cls)} />
      </CardContent>
    </Card>
  );
}

function CompositionRow({
  icon: Icon,
  label,
  sign,
  amount,
  href,
}: {
  icon: typeof Building2;
  label: string;
  sign: "+" | "−";
  amount: number;
  href?: string;
}) {
  const positive = sign === "+";
  const content = (
    <div className="flex items-center justify-between border-b py-2 last:border-b-0">
      <div className="flex items-center gap-2">
        <Icon className="text-muted-foreground size-4" />
        <span className="text-sm">{label}</span>
      </div>
      <span
        className={cn(
          "font-medium tabular-nums",
          positive ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
        )}
      >
        {sign} {formatTRY(amount)}
      </span>
    </div>
  );
  if (href) {
    return (
      <Link href={href} className="hover:bg-muted/30 block rounded -mx-2 px-2 transition-colors">
        {content}
      </Link>
    );
  }
  return content;
}

function ExpenseRow({
  label,
  amount,
  total,
  color,
}: {
  label: string;
  amount: number;
  total: number;
  color: string;
}) {
  const pct = total > 0 ? (amount / total) * 100 : 0;
  return (
    <div className="space-y-1.5 py-1.5">
      <div className="flex items-center justify-between text-sm">
        <span>{label}</span>
        <span className="tabular-nums">
          {formatTRY(amount)}{" "}
          <span className="text-muted-foreground text-xs">({pct.toFixed(1)}%)</span>
        </span>
      </div>
      <div className="bg-muted h-1.5 overflow-hidden rounded-full">
        <div className={cn("h-full", color)} style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}

// Pull TrendChart in via dynamic import only on client. Recharts is heavy.
import dynamic from "next/dynamic";
const TrendChartLazy = dynamic(
  () => import("./trend-chart").then((m) => ({ default: m.TrendChart })),
  { ssr: false },
);
