"use client";

import { useState } from "react";
import { 
  Landmark, TrendingUp, TrendingDown, DollarSign, 
  CreditCard, FileText, Download, Upload, Plus,
  Search, MoreHorizontal, ArrowRightLeft, Building
} from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
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 {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area
} from "recharts";
import jsPDF from "jspdf";
import autoTable from "jspdf-autotable";
import * as XLSX from "xlsx";

const kpiData = [
  { title: "Total Revenue (YTD)", value: "85.4M DZD", icon: DollarSign, change: "+14.5%", trend: "up", color: "text-emerald-500" },
  { title: "Total Expenses", value: "32.1M DZD", icon: TrendingDown, change: "+5.2%", trend: "down", color: "text-brand-red" },
  { title: "Net Profit", value: "53.3M DZD", icon: TrendingUp, change: "+22.4%", trend: "up", color: "text-blue-500" },
  { title: "Outstanding Invoices", value: "14.2M DZD", icon: FileText, change: "-2.1%", trend: "up", color: "text-amber-500" },
  { title: "Operating Cash Flow", value: "28.5M DZD", icon: ArrowRightLeft, change: "+8.4%", trend: "up", color: "text-purple-500" },
  { title: "Bank Balance", value: "45.8M DZD", icon: Landmark, change: "+12.1%", trend: "up", color: "text-indigo-400" },
];

const cashFlowData = [
  { name: "Jan", in: 12, out: 4 },
  { name: "Feb", in: 15, out: 5 },
  { name: "Mar", in: 18, out: 6 },
  { name: "Apr", in: 14, out: 8 },
  { name: "May", in: 22, out: 7 },
  { name: "Jun", in: 28, out: 9 },
];

const mockTransactions = [
  { id: "TRX-001", date: "2024-03-24", description: "Payment from SARL Plastique", category: "Income - Sales", amount: "+4,500,000", type: "income", status: "Completed" },
  { id: "TRX-002", date: "2024-03-23", description: "Supplier: Steel Imports Ltd", category: "Expense - Materials", amount: "-1,250,000", type: "expense", status: "Completed" },
  { id: "TRX-003", date: "2024-03-22", description: "Monthly Payroll", category: "Expense - Salaries", amount: "-3,400,000", type: "expense", status: "Completed" },
  { id: "TRX-004", date: "2024-03-20", description: "Payment from Global Waste", category: "Income - Sales", amount: "+8,900,000", type: "income", status: "Processing" },
  { id: "TRX-005", date: "2024-03-18", description: "Sonelgaz Utility Bill", category: "Expense - Utilities", amount: "-145,000", type: "expense", status: "Completed" },
];

const getStatusBadge = (status: string) => {
  switch (status) {
    case "Completed": return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30">Completed</Badge>;
    case "Processing": return <Badge className="bg-amber-500/20 text-amber-500 border-amber-500/30 animate-pulse">Processing</Badge>;
    case "Failed": return <Badge className="bg-brand-red/20 text-brand-red border-brand-red/30">Failed</Badge>;
    default: return <Badge>{status}</Badge>;
  }
};

export default function AccountingDashboard() {
  const [activeTab, setActiveTab] = useState("overview");
  const [transactions, setTransactions] = useState(mockTransactions);
  
  // Dialog States
  const [isExpenseOpen, setIsExpenseOpen] = useState(false);
  const [expenseAmount, setExpenseAmount] = useState("");
  const [expenseDesc, setExpenseDesc] = useState("");
  
  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
  const [paymentAmount, setPaymentAmount] = useState("");
  const [paymentDesc, setPaymentDesc] = useState("");

  const handleRecordExpense = () => {
    if (!expenseAmount) return;
    const newTx = {
      id: `TRX-00${transactions.length + 1}`,
      date: new Date().toISOString().split("T")[0],
      description: expenseDesc || "Miscellaneous Expense",
      category: "Expense - General",
      amount: `-${parseInt(expenseAmount).toLocaleString()} DZD`,
      type: "expense",
      status: "Completed"
    };
    setTransactions([newTx, ...transactions]);
    setIsExpenseOpen(false);
    setExpenseAmount("");
    setExpenseDesc("");
  };

  const handleRecordPayment = () => {
    if (!paymentAmount) return;
    const newTx = {
      id: `TRX-00${transactions.length + 1}`,
      date: new Date().toISOString().split("T")[0],
      description: paymentDesc || "Client Payment",
      category: "Income - Sales",
      amount: `+${parseInt(paymentAmount).toLocaleString()} DZD`,
      type: "income",
      status: "Completed"
    };
    setTransactions([newTx, ...transactions]);
    setIsPaymentOpen(false);
    setPaymentAmount("");
    setPaymentDesc("");
  };

  const exportToPDF = () => {
    const doc = new jsPDF();
    
    doc.setFontSize(20);
    doc.setTextColor(216, 11, 23);
    doc.text("K-CREATION ALGERIA", 14, 22);
    
    doc.setFontSize(14);
    doc.setTextColor(50, 50, 50);
    doc.text("Financial Transactions Report", 14, 30);
    
    doc.setFontSize(10);
    doc.setTextColor(100, 100, 100);
    doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 14, 38);

    const tableColumn = ["ID", "Date", "Description", "Category", "Amount (DZD)", "Type", "Status"];
    const tableRows = transactions.map(trx => [
      trx.id, trx.date, trx.description, trx.category, trx.amount, trx.type, trx.status
    ]);

    autoTable(doc, {
      head: [tableColumn],
      body: tableRows,
      startY: 45,
      theme: 'grid',
      styles: { fontSize: 8 },
      headStyles: { fillColor: [11, 17, 24] },
    });

    doc.save("K-CREATION_Financial_Report.pdf");
  };

  const exportToExcel = () => {
    const worksheet = XLSX.utils.json_to_sheet(transactions);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Transactions");
    XLSX.writeFile(workbook, "K-CREATION_Financial_Report.xlsx");
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
          <h2 className="text-3xl font-bold text-white tracking-tight">Financial Accounting</h2>
          <p className="text-gray-400 mt-1">Manage revenue, expenses, payroll, and banking operations.</p>
        </div>
        <div className="flex gap-2">
          <Button onClick={exportToPDF} variant="outline" className="border-white/10 bg-transparent text-gray-300 hover:text-white hover:bg-white/5">
            <Download className="w-4 h-4 mr-2" /> Export PDF
          </Button>
          <Button onClick={exportToExcel} variant="outline" className="border-white/10 bg-transparent text-gray-300 hover:text-white hover:bg-white/5">
            <Download className="w-4 h-4 mr-2" /> Export Excel
          </Button>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="bg-brand-charcoal border border-white/10 p-1">
          <TabsTrigger value="overview" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Dashboard</TabsTrigger>
          <TabsTrigger value="transactions" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Transactions</TabsTrigger>
          <TabsTrigger value="expenses" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Expenses</TabsTrigger>
          <TabsTrigger value="banking" className="data-[state=active]:bg-brand-red data-[state=active]:text-white">Bank Accounts</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-6 space-y-6">
          {/* KPI Cards */}
          <div className="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
            {kpiData.map((kpi, index) => (
              <Card key={index} className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 px-4 pt-4">
                  <CardTitle className="text-xs font-medium text-gray-400">
                    {kpi.title}
                  </CardTitle>
                  <kpi.icon className={`h-4 w-4 ${kpi.color}`} />
                </CardHeader>
                <CardContent className="px-4 pb-4">
                  <div className="text-xl font-bold text-white">{kpi.value}</div>
                  <p className={`text-xs mt-1 ${
                    kpi.trend === "up" ? "text-emerald-400" : 
                    "text-brand-red"
                  }`}>
                    {kpi.change} vs last month
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
            
            {/* Cash Flow Area Chart */}
            <Card className="col-span-4 bg-brand-charcoal/50 border-white/10 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="text-white">Cash Flow (Millions DZD)</CardTitle>
                <CardDescription className="text-gray-400">Income vs Expenses over the last 6 months.</CardDescription>
              </CardHeader>
              <CardContent className="pl-2">
                <div className="h-[300px] w-full mt-4">
                  <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={cashFlowData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
                      <defs>
                        <linearGradient id="colorIn" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
                          <stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
                        </linearGradient>
                        <linearGradient id="colorOut" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="5%" stopColor="#ef4444" stopOpacity={0.3}/>
                          <stop offset="95%" stopColor="#ef4444" stopOpacity={0}/>
                        </linearGradient>
                      </defs>
                      <CartesianGrid strokeDasharray="3 3" stroke="#333" vertical={false} />
                      <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                      <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
                      <Tooltip 
                        contentStyle={{ backgroundColor: "#111827", borderColor: "rgba(255,255,255,0.1)", color: "#fff" }}
                      />
                      <Area type="monotone" dataKey="in" name="Income" stroke="#10b981" fillOpacity={1} fill="url(#colorIn)" />
                      <Area type="monotone" dataKey="out" name="Expenses" stroke="#ef4444" fillOpacity={1} fill="url(#colorOut)" />
                    </AreaChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>

            {/* Quick Actions & Bank Summary */}
            <div className="col-span-3 space-y-4">
              <Card className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="text-white text-lg flex items-center gap-2">
                    <Building className="w-5 h-5 text-brand-red" /> Corporate Accounts
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex justify-between items-center p-3 bg-black/40 border border-white/10 rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold text-black">BEA</div>
                      <div>
                        <p className="text-white font-medium">BEA Principal</p>
                        <p className="text-xs text-gray-500">*** 4092</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-white font-bold">24,500,000 DZD</p>
                    </div>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-black/40 border border-white/10 rounded-lg">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-emerald-600 rounded-lg flex items-center justify-center font-bold text-white text-xs">CPA</div>
                      <div>
                        <p className="text-white font-medium">CPA Reserve</p>
                        <p className="text-xs text-gray-500">*** 1184</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-white font-bold">21,300,000 DZD</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <div className="grid grid-cols-2 gap-4">
                <Dialog open={isExpenseOpen} onOpenChange={setIsExpenseOpen}>
                  <DialogTrigger asChild>
                    <Button className="h-16 bg-black/40 border border-white/10 text-white hover:bg-white/5 hover:border-white/30 flex flex-col gap-1 items-center justify-center">
                      <Plus className="w-5 h-5 text-brand-red" />
                      <span className="text-xs">Record Expense</span>
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="bg-brand-charcoal border-white/10 text-white">
                    <DialogHeader>
                      <DialogTitle>Record New Expense</DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                      <div className="space-y-2">
                        <Label>Amount (DZD)</Label>
                        <Input type="number" placeholder="e.g. 50000" value={expenseAmount} onChange={(e) => setExpenseAmount(e.target.value)} className="bg-black/40 border-white/10 focus-visible:ring-brand-red" />
                      </div>
                      <div className="space-y-2">
                        <Label>Description</Label>
                        <Input placeholder="e.g. Office Supplies" value={expenseDesc} onChange={(e) => setExpenseDesc(e.target.value)} className="bg-black/40 border-white/10 focus-visible:ring-brand-red" />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button variant="outline" onClick={() => setIsExpenseOpen(false)} className="border-white/10 text-gray-300">Cancel</Button>
                      <Button onClick={handleRecordExpense} className="bg-brand-red hover:bg-brand-red/90 text-white">Save Expense</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>

                <Dialog open={isPaymentOpen} onOpenChange={setIsPaymentOpen}>
                  <DialogTrigger asChild>
                    <Button className="h-16 bg-black/40 border border-white/10 text-white hover:bg-white/5 hover:border-white/30 flex flex-col gap-1 items-center justify-center">
                      <Upload className="w-5 h-5 text-emerald-500" />
                      <span className="text-xs">Record Payment</span>
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="bg-brand-charcoal border-white/10 text-white">
                    <DialogHeader>
                      <DialogTitle>Record New Payment (Income)</DialogTitle>
                    </DialogHeader>
                    <div className="space-y-4 py-4">
                      <div className="space-y-2">
                        <Label>Amount (DZD)</Label>
                        <Input type="number" placeholder="e.g. 150000" value={paymentAmount} onChange={(e) => setPaymentAmount(e.target.value)} className="bg-black/40 border-white/10 focus-visible:ring-brand-red" />
                      </div>
                      <div className="space-y-2">
                        <Label>Client / Description</Label>
                        <Input placeholder="e.g. Payment from Client X" value={paymentDesc} onChange={(e) => setPaymentDesc(e.target.value)} className="bg-black/40 border-white/10 focus-visible:ring-brand-red" />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button variant="outline" onClick={() => setIsPaymentOpen(false)} className="border-white/10 text-gray-300">Cancel</Button>
                      <Button onClick={handleRecordPayment} className="bg-emerald-600 hover:bg-emerald-500 text-white">Save Payment</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>
            </div>
          </div>
        </TabsContent>

        {/* TRANSACTIONS TAB */}
        <TabsContent value="transactions" className="mt-6">
          <Card className="bg-brand-charcoal/50 border-white/10 backdrop-blur-sm overflow-hidden">
            <div className="p-4 border-b border-white/10 flex items-center justify-between bg-black/20">
              <div className="relative w-full max-w-sm">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-500" />
                <Input 
                  placeholder="Search transactions..." 
                  className="pl-9 bg-black/40 border-white/10 focus-visible:ring-brand-red text-white"
                />
              </div>
              <Button className="bg-brand-red hover:bg-brand-red/90 text-white">
                <Plus className="w-4 h-4 mr-2" /> New Transaction
              </Button>
            </div>
            
            <div className="overflow-x-auto">
              <Table>
                <TableHeader className="bg-black/40 hover:bg-black/40">
                  <TableRow className="border-white/10 hover:bg-transparent">
                    <TableHead className="text-gray-400 font-semibold">Date</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Description</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Category</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Amount (DZD)</TableHead>
                    <TableHead className="text-gray-400 font-semibold">Status</TableHead>
                    <TableHead className="text-right text-gray-400 font-semibold">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {transactions.map((trx) => (
                    <TableRow key={trx.id} className="border-white/5 hover:bg-white/5 transition-colors">
                      <TableCell className="text-gray-300">{trx.date}</TableCell>
                      <TableCell>
                        <div className="font-semibold text-white">{trx.description}</div>
                        <div className="text-xs text-gray-500">{trx.id}</div>
                      </TableCell>
                      <TableCell className="text-gray-400">{trx.category}</TableCell>
                      <TableCell>
                        <span className={`font-bold ${trx.type === 'income' ? 'text-emerald-400' : 'text-brand-red'}`}>
                          {trx.amount}
                        </span>
                      </TableCell>
                      <TableCell>{getStatusBadge(trx.status)}</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" className="h-8 w-8 p-0 text-gray-400 hover:text-white hover:bg-white/10">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}