"use client";
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Badge } from "@/components/ui/badge";
import { Search, FileText, Download, Eye } from "lucide-react";

type Invoice = {
  id: string;
  branchId: string;
  branchName: string;
  orderNumber: string;
  customerName: string;
  amount: number;
  date: Date;
  status: "paid" | "pending" | "overdue";
};

type Branch = {
  id: string;
  name: string;
};

export default function InvoiceManagement() {
  const [invoices, setInvoices] = useState<Invoice[]>([
    {
      id: "1",
      branchId: "1",
      branchName: "Downtown Branch",
      orderNumber: "ORD-001",
      customerName: "John Doe",
      amount: 150.0,
      date: new Date("2023-06-01"),
      status: "paid",
    },
    {
      id: "2",
      branchId: "2",
      branchName: "Uptown Branch",
      orderNumber: "ORD-002",
      customerName: "Jane Smith",
      amount: 200.0,
      date: new Date("2023-06-02"),
      status: "pending",
    },
    {
      id: "3",
      branchId: "1",
      branchName: "Downtown Branch",
      orderNumber: "ORD-003",
      customerName: "Bob Johnson",
      amount: 100.0,
      date: new Date("2023-06-03"),
      status: "overdue",
    },
    {
      id: "4",
      branchId: "3",
      branchName: "Suburb Branch",
      orderNumber: "ORD-004",
      customerName: "Alice Brown",
      amount: 300.0,
      date: new Date("2023-06-04"),
      status: "paid",
    },
    {
      id: "5",
      branchId: "2",
      branchName: "Uptown Branch",
      orderNumber: "ORD-005",
      customerName: "Charlie Davis",
      amount: 250.0,
      date: new Date("2023-06-05"),
      status: "paid",
    },
  ]);

  const [branches, setBranches] = useState<Branch[]>([
    { id: "1", name: "Downtown Branch" },
    { id: "2", name: "Uptown Branch" },
    { id: "3", name: "Suburb Branch" },
  ]);

  const [selectedBranch, setSelectedBranch] = useState<string>("all");
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedInvoice, setSelectedInvoice] = useState<Invoice | null>(null);

  const filteredInvoices = invoices.filter(
    (invoice) =>
      (selectedBranch === "all" || invoice.branchId === selectedBranch) &&
      (invoice.orderNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
        invoice.customerName.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  const totalAmount = filteredInvoices.reduce(
    (sum, invoice) => sum + invoice.amount,
    0
  );

  const handleViewInvoice = (invoice: Invoice) => {
    setSelectedInvoice(invoice);
  };

  const handleDownloadInvoice = (invoiceId: string) => {
    // In a real application, this would trigger a download of the invoice
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">Invoice Management</h1>

      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center space-x-2">
          <div className="relative">
            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <Input
              type="text"
              placeholder="Search invoices..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
          <Select value={selectedBranch} onValueChange={setSelectedBranch}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select branch" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Branches</SelectItem>
              {branches.map((branch) => (
                <SelectItem key={branch.id} value={branch.id}>
                  {branch.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Invoice Summary</CardTitle>
          <CardDescription>
            Overview of invoices for{" "}
            {selectedBranch === "all"
              ? "all branches"
              : branches.find((b) => b.id === selectedBranch)?.name}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">
            Total Amount: ${totalAmount.toFixed(2)}
          </div>
          <div>Number of Invoices: {filteredInvoices.length}</div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Invoices</CardTitle>
          <CardDescription>
            List of invoices for completed orders
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Order Number</TableHead>
                <TableHead>Branch</TableHead>
                <TableHead>Customer</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredInvoices.map((invoice) => (
                <TableRow key={invoice.id}>
                  <TableCell>{invoice.orderNumber}</TableCell>
                  <TableCell>{invoice.branchName}</TableCell>
                  <TableCell>{invoice.customerName}</TableCell>
                  <TableCell>${invoice.amount.toFixed(2)}</TableCell>
                  <TableCell>{invoice.date.toLocaleDateString()}</TableCell>
                  <TableCell>
                    <Badge
                      className="capitalize"
                      variant={
                        invoice.status === "paid"
                          ? "default"
                          : invoice.status === "pending"
                          ? "secondary"
                          : "destructive"
                      }
                    >
                      {invoice.status}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex space-x-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleViewInvoice(invoice)}
                      >
                        <Eye className="mr-2 h-4 w-4" />
                        View
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDownloadInvoice(invoice.id)}
                      >
                        <Download className="mr-2 h-4 w-4" />
                        Download
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Dialog
        open={!!selectedInvoice}
        onOpenChange={() => setSelectedInvoice(null)}
      >
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Invoice Details</DialogTitle>
            <DialogDescription>
              Details for invoice {selectedInvoice?.orderNumber}
            </DialogDescription>
          </DialogHeader>
          {selectedInvoice && (
            <div className="mt-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="font-semibold">Order Number</div>
                  <div>{selectedInvoice.orderNumber}</div>
                </div>
                <div>
                  <div className="font-semibold">Branch</div>
                  <div>{selectedInvoice.branchName}</div>
                </div>
                <div>
                  <div className="font-semibold">Customer</div>
                  <div>{selectedInvoice.customerName}</div>
                </div>
                <div>
                  <div className="font-semibold">Amount</div>
                  <div>${selectedInvoice.amount.toFixed(2)}</div>
                </div>
                <div>
                  <div className="font-semibold">Date</div>
                  <div>{selectedInvoice.date.toLocaleDateString()}</div>
                </div>
                <div>
                  <div className="font-semibold">Status</div>
                  <Badge
                    className="capitalize"
                    variant={
                      selectedInvoice.status === "paid"
                        ? "default"
                        : selectedInvoice.status === "pending"
                        ? "secondary"
                        : "destructive"
                    }
                  >
                    {selectedInvoice.status}
                  </Badge>
                </div>
              </div>
              <Button
                variant={"appVariant"}
                className="mt-4 w-full"
                onClick={() => handleDownloadInvoice(selectedInvoice.id)}
              >
                <Download className="mr-2 h-4 w-4" />
                Download Invoice
              </Button>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}