"use client";

/** التقارير المحاسبية الشاملة (v8.1):
 *  1) كشف الأقساط التراكمي لكل مرحلة دراسية + تصدير Excel
 *  2) تقارير المصروفات المصنفة: كشف رواتب شهري، تشغيلية، صيانة، وكشف موحد
 *  3) الميزانية / حركة الصندوق الشهرية التلقائية مع الرصيد المدور للشهر التالي */

import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { apiFetch, formatMoney } from "@/lib/client-utils";
import { EXPENSE_KINDS, EXPENSE_KIND_AR } from "@/lib/finance-kinds";
import {
  Loader2, FileSpreadsheet, PiggyBank, TrendingUp, TrendingDown, Wallet, ReceiptText, FileText, RefreshCw,
} from "lucide-react";

/* ─────────── أنواع البيانات ─────────── */

interface InstallmentRow {
  id: string;
  studentCode: string;
  nameAr: string;
  grade: string;
  classroom: string;
  grossFee: number;
  discountPercent: number;
  netFee: number;
  paid: number;
  remaining: number;
  installments: { seq: number; dueDate: string; amount: number; paidAmount: number; status: string }[];
}

interface InstallmentData {
  rows: InstallmentRow[];
  grades: string[];
  installmentMonths: number;
  summary: { studentsCount: number; totalNet: number; totalPaid: number; totalRemaining: number };
}

interface ClassifiedExpenseRow {
  id: string;
  voucherNumber: string | null;
  kind: string;
  kindLabel: string;
  category: string;
  description: string;
  amount: number;
  spentAt: string;
  by: string | null;
}

interface ClassifiedData {
  rows: ClassifiedExpenseRow[];
  breakdown: { kind: string; label: string; total: number; count: number }[];
  total: number;
  count: number;
  period: { label: string };
}

interface BudgetData {
  month: string;
  monthLabel: string;
  currency: string;
  openingBalance: { settingsBase: number; carriedFromPrevious: number };
  income: {
    total: number; students: number; staffLoanRepay: number; activityLoanRepay: number;
    otherSchool: number; transfer: number; otherMisc: number; otherTotal: number;
  };
  expenses: {
    total: number; salaryAndLecture: number; salaryOnly: number; lectureWages: number;
    bonuses: number; deductions: number; staffLoanGiven: number; activityLoanGiven: number;
    maintenance: number; operational: number; otherSchoolExpenses: number; loans: number; transfers: number; companyInvoices: number;
  };
  net: number;
  closingBalance: number;
}

export function AccountingReportsView({ currency }: { currency: string }) {
  /* ── كشف الأقساط ── */
  const [instGrade, setInstGrade] = useState("");
  const [instData, setInstData] = useState<InstallmentData | null>(null);
  const [instLoading, setInstLoading] = useState(false);
  const [exportingExcel, setExportingExcel] = useState(false);

  /* ── المصروفات المصنفة ── */
  const [expKind, setExpKind] = useState("");
  const [expFrom, setExpFrom] = useState("");
  const [expTo, setExpTo] = useState("");
  const [expData, setExpData] = useState<ClassifiedData | null>(null);
  const [expLoading, setExpLoading] = useState(false);

  /* ── الميزانية الشهرية ── */
  const [budgetMonth, setBudgetMonth] = useState(() => new Date().toISOString().slice(0, 7));
  const [budget, setBudget] = useState<BudgetData | null>(null);
  const [budgetLoading, setBudgetLoading] = useState(false);

  const loadInstallments = useCallback(async (grade: string) => {
    setInstLoading(true);
    try {
      const d = await apiFetch<InstallmentData>(`/api/installments${grade ? `?grade=${encodeURIComponent(grade)}` : ""}`);
      setInstData(d);
    } catch {
      setInstData(null);
    } finally {
      setInstLoading(false);
    }
  }, []);

  const loadClassified = useCallback(async (kind: string, from: string, to: string) => {
    setExpLoading(true);
    try {
      const params = new URLSearchParams();
      if (kind) params.set("kind", kind);
      if (from) params.set("from", from);
      if (to) params.set("to", to);
      const d = await apiFetch<ClassifiedData>(`/api/reports/expenses-by-kind?${params.toString()}`);
      setExpData(d);
    } catch {
      setExpData(null);
    } finally {
      setExpLoading(false);
    }
  }, []);

  const loadBudget = useCallback(async (month: string) => {
    setBudgetLoading(true);
    try {
      const d = await apiFetch<BudgetData>(`/api/reports/budget?month=${month}`);
      setBudget(d);
    } catch {
      setBudget(null);
    } finally {
      setBudgetLoading(false);
    }
  }, []);

  useEffect(() => {
    loadInstallments("");
  }, [loadInstallments]);

  useEffect(() => {
    loadClassified("", "", "");
  }, [loadClassified]);

  useEffect(() => {
    loadBudget(budgetMonth);
  }, [loadBudget, budgetMonth]);

  async function exportExcel() {
    setExportingExcel(true);
    try {
      const res = await fetch(`/api/reports/installments-excel${instGrade ? `?grade=${encodeURIComponent(instGrade)}` : ""}`, {
        credentials: "include",
      });
      if (!res.ok) throw new Error("فشل التصدير");
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `كشف-الأقساط-التراكمي-${instGrade || "كل-المراحل"}-${new Date().toISOString().slice(0, 10)}.xlsx`;
      a.click();
      URL.revokeObjectURL(url);
    } catch {
      // تجاهل — رسالة الخطأ عبر الحالة
    } finally {
      setExportingExcel(false);
    }
  }

  const thC = "text-right font-bold whitespace-nowrap";

  return (
    <Tabs defaultValue="installments" className="space-y-4">
      <TabsList className="grid w-full grid-cols-3">
        <TabsTrigger value="installments">كشف الأقساط التراكمي</TabsTrigger>
        <TabsTrigger value="classified-expenses">تقارير المصروفات</TabsTrigger>
        <TabsTrigger value="budget">الميزانية الشهرية</TabsTrigger>
      </TabsList>

      {/* ═══ كشف الأقساط التراكمي ═══ */}
      <TabsContent value="installments" className="space-y-4 mt-4">
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-start justify-between gap-2 flex-wrap">
              <div>
                <CardTitle className="text-lg flex items-center gap-2">
                  <FileSpreadsheet className="w-5 h-5 text-emerald-700" />
                  كشف الأقساط التراكمي حسب المرحلة الدراسية
                </CardTitle>
                <CardDescription>
                  جدول أقساط كل طالب (8 أقساط) مع الترحيل الآلي للدفعات — والتصدير إلى شيت Excel بكامل التفاصيل
                </CardDescription>
              </div>
              <div className="flex items-center gap-2 shrink-0 flex-wrap">
                <Select
                  value={instGrade || "ALL"}
                  onValueChange={(v) => {
                    const g = v === "ALL" ? "" : v;
                    setInstGrade(g);
                    loadInstallments(g);
                  }}
                >
                  <SelectTrigger className="w-44"><SelectValue placeholder="كل المراحل" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ALL">كل المراحل</SelectItem>
                    {(instData?.grades ?? []).map((g) => (
                      <SelectItem key={g} value={g}>{g}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={exportExcel}
                  disabled={exportingExcel || !instData || instData.rows.length === 0}
                  className="border-emerald-600/40 text-emerald-700 hover:bg-emerald-50"
                >
                  {exportingExcel ? <Loader2 className="w-4 h-4 animate-spin" /> : <FileSpreadsheet className="w-4 h-4 ml-1" />}
                  تصدير Excel
                </Button>
                <Button variant="outline" size="sm" onClick={() => loadInstallments(instGrade)} disabled={instLoading}>
                  <RefreshCw className={`w-4 h-4 ${instLoading ? "animate-spin" : ""}`} />
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-3">
            {instLoading ? (
              <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>
            ) : !instData || instData.rows.length === 0 ? (
              <p className="text-sm text-muted-foreground text-center py-10">لا يوجد طلاب في هذه المرحلة</p>
            ) : (
              <>
                <div className="grid gap-2 sm:grid-cols-4">
                  <div className="rounded-lg border p-3 text-center">
                    <p className="text-[11px] text-muted-foreground">عدد الطلاب</p>
                    <p className="text-xl font-extrabold">{instData.summary.studentsCount}</p>
                  </div>
                  <div className="rounded-lg border p-3 text-center">
                    <p className="text-[11px] text-muted-foreground">إجمالي الصافي</p>
                    <p className="text-lg font-extrabold text-primary">{formatMoney(instData.summary.totalNet, currency)}</p>
                  </div>
                  <div className="rounded-lg border p-3 text-center">
                    <p className="text-[11px] text-muted-foreground">إجمالي المسدد</p>
                    <p className="text-lg font-extrabold text-emerald-700">{formatMoney(instData.summary.totalPaid, currency)}</p>
                  </div>
                  <div className="rounded-lg border p-3 text-center">
                    <p className="text-[11px] text-muted-foreground">إجمالي المتبقي</p>
                    <p className="text-lg font-extrabold text-destructive">{formatMoney(instData.summary.totalRemaining, currency)}</p>
                  </div>
                </div>
                <div className="overflow-x-auto max-h-[480px] overflow-y-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className={thC}>الطالب</TableHead>
                        <TableHead className={thC}>الكود</TableHead>
                        <TableHead className={thC}>القسط الكلي</TableHead>
                        <TableHead className={thC}>الخصم</TableHead>
                        <TableHead className={thC}>الصافي</TableHead>
                        <TableHead className={thC}>المسدد</TableHead>
                        <TableHead className={thC}>المتبقي</TableHead>
                        <TableHead className={thC}>حالة الأقساط</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {instData.rows.map((r) => {
                        const paidCount = r.installments.filter((i) => i.status === "PAID").length;
                        const partialCount = r.installments.filter((i) => i.status === "PARTIAL").length;
                        return (
                          <TableRow key={r.id}>
                            <TableCell className="font-medium">{r.nameAr}</TableCell>
                            <TableCell dir="ltr" className="text-xs">{r.studentCode}</TableCell>
                            <TableCell className="whitespace-nowrap">{formatMoney(r.grossFee, currency)}</TableCell>
                            <TableCell className="text-emerald-700 whitespace-nowrap">
                              {r.discountPercent > 0 ? `${r.discountPercent}%` : "—"}
                            </TableCell>
                            <TableCell className="whitespace-nowrap">{formatMoney(r.netFee, currency)}</TableCell>
                            <TableCell className="text-emerald-700 font-medium whitespace-nowrap">{formatMoney(r.paid, currency)}</TableCell>
                            <TableCell className="text-destructive font-medium whitespace-nowrap">{formatMoney(r.remaining, currency)}</TableCell>
                            <TableCell>
                              <div className="flex items-center gap-1 flex-wrap">
                                <Badge variant="secondary" className="text-[10px]">{paidCount}/{instData.installmentMonths} مسدد</Badge>
                                {partialCount > 0 && (
                                  <Badge variant="outline" className="text-[10px]">{partialCount} جزئي</Badge>
                                )}
                              </div>
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </TabsContent>

      {/* ═══ تقارير المصروفات المصنفة ═══ */}
      <TabsContent value="classified-expenses" className="space-y-4 mt-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <ReceiptText className="w-5 h-5 text-red-600" />
              تقارير المصروفات المصنفة
            </CardTitle>
            <CardDescription>
              كشف مستقل حسب النوع (رواتب شهري، تشغيلية وأخرى، صيانة، قروض، مناقلة...) أو كشف موحد بكل البنود
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* الفلاتر */}
            <div className="grid gap-3 sm:grid-cols-4">
              <div className="space-y-2">
                <Label>نوع الكشف</Label>
                <Select value={expKind || "ALL"} onValueChange={(v) => { const k = v === "ALL" ? "" : v; setExpKind(k); loadClassified(k, expFrom, expTo); }}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="ALL">كشف موحد (كل البنود)</SelectItem>
                    {EXPENSE_KINDS.map((k) => (
                      <SelectItem key={k} value={k}>{EXPENSE_KIND_AR[k]}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>من تاريخ</Label>
                <Input type="date" value={expFrom} onChange={(e) => setExpFrom(e.target.value)} />
              </div>
              <div className="space-y-2">
                <Label>إلى تاريخ</Label>
                <Input type="date" value={expTo} onChange={(e) => setExpTo(e.target.value)} />
              </div>
              <div className="flex items-end gap-2">
                <Button variant="outline" className="flex-1" onClick={() => loadClassified(expKind, expFrom, expTo)} disabled={expLoading}>
                  {expLoading ? <Loader2 className="w-4 h-4 ml-1 animate-spin" /> : <RefreshCw className="w-4 h-4 ml-1" />}
                  عرض
                </Button>
                <Button
                  variant="ghost"
                  onClick={() => { setExpKind(""); setExpFrom(""); setExpTo(""); loadClassified("", "", ""); }}
                >
                  مسح
                </Button>
              </div>
            </div>

            {expLoading ? (
              <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>
            ) : !expData || expData.rows.length === 0 ? (
              <p className="text-sm text-muted-foreground text-center py-10">لا توجد مصروفات مطابقة للفلاتر المحددة</p>
            ) : (
              <>
                {/* تفصيل البنود (للكشف الموحد) */}
                {(!expKind || expData.breakdown.length > 1) && (
                  <div className="grid gap-2 sm:grid-cols-3 lg:grid-cols-4">
                    {expData.breakdown.map((b) => (
                      <div key={b.kind} className="rounded-lg border p-3">
                        <p className="text-[11px] text-muted-foreground truncate">{b.label}</p>
                        <p className="text-lg font-extrabold text-red-600">{formatMoney(b.total, currency)}</p>
                        <p className="text-[10px] text-muted-foreground">{b.count} حركة</p>
                      </div>
                    ))}
                    <div className="rounded-lg bg-red-50 border border-red-200 p-3">
                      <p className="text-[11px] text-red-700">الإجمالي الكلي</p>
                      <p className="text-lg font-extrabold text-red-700">{formatMoney(expData.total, currency)}</p>
                      <p className="text-[10px] text-red-600">{expData.count} حركة</p>
                    </div>
                  </div>
                )}

                <div className="overflow-x-auto max-h-[420px] overflow-y-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className={thC}>وصل الصرف</TableHead>
                        <TableHead className={thC}>البند</TableHead>
                        <TableHead className={thC}>الفئة</TableHead>
                        <TableHead className={thC}>الوصف</TableHead>
                        <TableHead className={thC}>التاريخ</TableHead>
                        <TableHead className={thC}>المبلغ</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {expData.rows.map((r) => (
                        <TableRow key={r.id}>
                          <TableCell dir="ltr" className="text-xs font-medium">{r.voucherNumber ?? "—"}</TableCell>
                          <TableCell><Badge variant="outline" className="text-[10px]">{r.kindLabel}</Badge></TableCell>
                          <TableCell className="text-xs">{r.category}</TableCell>
                          <TableCell className="max-w-56 truncate">{r.description}</TableCell>
                          <TableCell className="text-xs text-muted-foreground whitespace-nowrap">{r.spentAt.slice(0, 10)}</TableCell>
                          <TableCell className="font-bold text-red-600 whitespace-nowrap">-{formatMoney(r.amount, currency)}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </TabsContent>

      {/* ═══ الميزانية الشهرية ═══ */}
      <TabsContent value="budget" className="space-y-4 mt-4">
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-start justify-between gap-2 flex-wrap">
              <div>
                <CardTitle className="text-lg flex items-center gap-2">
                  <PiggyBank className="w-5 h-5 text-primary" />
                  تقرير الميزانية — حركة الصندوق الشهرية
                </CardTitle>
                <CardDescription>
                  مقارنة تلقائية بين الإيرادات المقبوضة والمصروفات المدفوعة، وصافي الرصيد المدور للشهر التالي
                </CardDescription>
              </div>
              <div className="flex items-center gap-2">
                <Input type="month" value={budgetMonth} onChange={(e) => setBudgetMonth(e.target.value)} className="w-40" aria-label="اختيار الشهر" />
                <Button variant="outline" size="sm" onClick={() => loadBudget(budgetMonth)} disabled={budgetLoading}>
                  <RefreshCw className={`w-4 h-4 ${budgetLoading ? "animate-spin" : ""}`} />
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            {budgetLoading ? (
              <div className="flex justify-center py-10"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>
            ) : !budget ? (
              <p className="text-sm text-muted-foreground text-center py-10">تعذر جلب تقرير الميزانية — حاول مجدداً</p>
            ) : (
              <>
                <p className="text-sm font-bold text-center">{budget.monthLabel}</p>

                {/* رصيد بداية الشهر */}
                <div className="rounded-xl border bg-muted/30 p-3 flex items-center justify-between">
                  <p className="text-sm font-semibold flex items-center gap-2">
                    <Wallet className="w-4 h-4 text-muted-foreground" />
                    رصيد بداية الشهر (المدور من الشهر السابق)
                  </p>
                  <p className={`text-lg font-extrabold ${budget.openingBalance.carriedFromPrevious >= 0 ? "text-emerald-700" : "text-red-600"}`}>
                    {formatMoney(budget.openingBalance.carriedFromPrevious, currency)}
                  </p>
                </div>

                <div className="grid gap-4 lg:grid-cols-2">
                  {/* الإيرادات */}
                  <div className="rounded-xl border p-4">
                    <p className="font-bold text-emerald-700 flex items-center gap-2 mb-3">
                      <TrendingUp className="w-4 h-4" />
                      الإيرادات المقبوضة
                    </p>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between"><span>إيرادات الطلاب (أقساط)</span><span className="font-bold">{formatMoney(budget.income.students, currency)}</span></div>
                      <div className="flex justify-between"><span>تسديد سلف منتسبين</span><span className="font-bold">{formatMoney(budget.income.staffLoanRepay, currency)}</span></div>
                      <div className="flex justify-between"><span>تسديد سلف نشاطات</span><span className="font-bold">{formatMoney(budget.income.activityLoanRepay, currency)}</span></div>
                      <div className="flex justify-between"><span>واردات مدارس أخرى</span><span className="font-bold">{formatMoney(budget.income.otherSchool, currency)}</span></div>
                      <div className="flex justify-between"><span>مناقلة</span><span className="font-bold">{formatMoney(budget.income.transfer, currency)}</span></div>
                      <div className="flex justify-between"><span>إيرادات خارجية أخرى</span><span className="font-bold">{formatMoney(budget.income.otherMisc, currency)}</span></div>
                      <div className="flex justify-between border-t pt-2 text-base">
                        <span className="font-bold text-emerald-700">إجمالي الإيرادات</span>
                        <span className="font-extrabold text-emerald-700">{formatMoney(budget.income.total, currency)}</span>
                      </div>
                    </div>
                  </div>

                  {/* المصروفات */}
                  <div className="rounded-xl border p-4">
                    <p className="font-bold text-red-600 flex items-center gap-2 mb-3">
                      <TrendingDown className="w-4 h-4" />
                      المصروفات المدفوعة
                    </p>
                    <div className="space-y-2 text-sm">
                      <div className="flex justify-between">
                        <span>رواتب وأجور محاضرات</span>
                        <span className="font-bold">{formatMoney(budget.expenses.salaryAndLecture, currency)}</span>
                      </div>
                      <div className="flex justify-between pr-4 text-xs text-muted-foreground">
                        <span>منها: مكافآت وعمليات</span>
                        <span>{formatMoney(budget.expenses.bonuses, currency)}</span>
                      </div>
                      <div className="flex justify-between"><span>سلف منتسبين</span><span className="font-bold">{formatMoney(budget.expenses.staffLoanGiven, currency)}</span></div>
                      <div className="flex justify-between"><span>سلف نشاط</span><span className="font-bold">{formatMoney(budget.expenses.activityLoanGiven, currency)}</span></div>
                      <div className="flex justify-between"><span>صيانة</span><span className="font-bold">{formatMoney(budget.expenses.maintenance, currency)}</span></div>
                      <div className="flex justify-between"><span>مصاريف تشغيلية</span><span className="font-bold">{formatMoney(budget.expenses.operational, currency)}</span></div>
                      <div className="flex justify-between"><span>مصاريف مدرسية أخرى</span><span className="font-bold">{formatMoney(budget.expenses.otherSchoolExpenses, currency)}</span></div>
                      <div className="flex justify-between"><span>فواتير الشركات</span><span className="font-bold">{formatMoney(budget.expenses.companyInvoices, currency)}</span></div>
                      <div className="flex justify-between"><span>قروض</span><span className="font-bold">{formatMoney(budget.expenses.loans, currency)}</span></div>
                      <div className="flex justify-between"><span>مناقلة</span><span className="font-bold">{formatMoney(budget.expenses.transfers, currency)}</span></div>
                      <div className="flex justify-between border-t pt-2 text-base">
                        <span className="font-bold text-red-600">إجمالي المصروفات</span>
                        <span className="font-extrabold text-red-600">{formatMoney(budget.expenses.total, currency)}</span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* النتيجة */}
                <div className="grid gap-3 sm:grid-cols-2">
                  <div className={`rounded-xl border p-4 text-center ${budget.net >= 0 ? "bg-emerald-50 border-emerald-200" : "bg-red-50 border-red-200"}`}>
                    <p className="text-sm text-muted-foreground">صافي حركة الشهر (إيرادات − مصروفات)</p>
                    <p className={`text-2xl font-extrabold mt-1 ${budget.net >= 0 ? "text-emerald-700" : "text-red-600"}`}>
                      {formatMoney(budget.net, currency)}
                    </p>
                  </div>
                  <div className="rounded-xl border-2 border-primary/30 bg-primary/5 p-4 text-center">
                    <p className="text-sm text-muted-foreground flex items-center justify-center gap-1">
                      <FileText className="w-4 h-4" />
                      صافي الرصيد المدور للشهر التالي (صندوق بداية الشهر الجديد)
                    </p>
                    <p className={`text-2xl font-extrabold mt-1 ${budget.closingBalance >= 0 ? "text-primary" : "text-red-600"}`}>
                      {formatMoney(budget.closingBalance, currency)}
                    </p>
                  </div>
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
}