import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent } from "@/components/ui/card";
import { useSupabaseEmployeeData } from "@/hooks/useSupabaseEmployeeData";
import { Currency, convert, formatCurrency, getUsdToLbpRate } from "@/lib/currency";

interface DetailedTransaction {
  location: string;
  empId: string;
  empName: string;
  collectionAmount: number;
  collectionDate: string;
  depositAmount: number;
  depositDate: string;
  difference: number;
}

export const DetailedEmployeePaymentReport = () => {
  const [displayCurrency, setDisplayCurrency] = useState<Currency>("USD");
  const { employees, transactions } = useSupabaseEmployeeData(displayCurrency);
  const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>('all');

  const formatDate = (date: string) => {
    return new Date(date).toLocaleDateString('en-US');
  };

  // Process transactions with the specific business logic
  const processEmployeeTransactions = (employeeId: string): DetailedTransaction[] => {
    const employee = employees.find(emp => emp.id === employeeId);
    if (!employee) return [];

    const employeeTransactions = transactions
      .filter(t => t.employee_id === employeeId)
      .map(t => ({
        ...t,
        collection_amount: convert(t.collection_amount, t.currency, displayCurrency),
        deposit_amount: convert(t.deposit_amount, t.currency, displayCurrency),
      }))
      .sort((a, b) => new Date(a.transaction_date).getTime() - new Date(b.transaction_date).getTime());

    const detailedTransactions: DetailedTransaction[] = [];
    let pendingCollections: { amount: number; date: string }[] = [];

    // Group transactions by date
    const transactionsByDate = employeeTransactions.reduce((acc, transaction) => {
      const date = transaction.transaction_date;
      if (!acc[date]) {
        acc[date] = { collections: 0, deposits: 0 };
      }
      acc[date].collections += transaction.collection_amount;
      acc[date].deposits += transaction.deposit_amount;
      return acc;
    }, {} as Record<string, { collections: number; deposits: number }>);

    // Process each date chronologically
    Object.entries(transactionsByDate)
      .sort(([a], [b]) => new Date(a).getTime() - new Date(b).getTime())
      .forEach(([date, { collections, deposits }]) => {
        // Add collection entry if there's a collection
        if (collections > 0) {
          pendingCollections.push({ amount: collections, date });
          detailedTransactions.push({
            location: employee.location || 'BGRoad, Karnataka',
            empId: employee.emp_id.replace('EMP', ''),
            empName: employee.name,
            collectionAmount: collections,
            collectionDate: date,
            depositAmount: 0,
            depositDate: '',
            difference: 0
          });
        }

        // Process deposits
        if (deposits > 0) {
          let remainingDeposit = deposits;
          const depositDate = date;

          // First, try to clear pending collections in chronological order
          for (let i = 0; i < pendingCollections.length && remainingDeposit > 0; i++) {
            const pending = pendingCollections[i];
            const amountToClear = Math.min(pending.amount, remainingDeposit);
            
            if (amountToClear > 0) {
              // Find the corresponding collection entry and update it
              const collectionEntry = detailedTransactions.find(
                dt => dt.collectionDate === pending.date && dt.depositAmount === 0
              );
              
              if (collectionEntry) {
                collectionEntry.depositAmount = amountToClear;
                collectionEntry.depositDate = depositDate;
                collectionEntry.difference = amountToClear - collectionEntry.collectionAmount;
              }

              pending.amount -= amountToClear;
              remainingDeposit -= amountToClear;
            }
          }

          // Remove fully cleared collections
          pendingCollections = pendingCollections.filter(p => p.amount > 0);

          // If there's remaining deposit after clearing collections, add separate deposit entries
          while (remainingDeposit > 0) {
            detailedTransactions.push({
              location: employee.location || 'BGRoad, Karnataka',
              empId: employee.emp_id.replace('EMP', ''),
              empName: employee.name,
              collectionAmount: 0,
              collectionDate: '',
              depositAmount: remainingDeposit,
              depositDate: depositDate,
              difference: remainingDeposit
            });
            remainingDeposit = 0;
          }
        }
      });

    return detailedTransactions;
  };

  const getTransactionsToShow = (): DetailedTransaction[] => {
    if (selectedEmployeeId === 'all') {
      return employees.flatMap(employee => processEmployeeTransactions(employee.id));
    } else {
      return processEmployeeTransactions(selectedEmployeeId);
    }
  };

  const detailedTransactions = getTransactionsToShow();

  // Calculate totals (combined, in display currency)
  const totalCollection = detailedTransactions.reduce((sum, t) => sum + t.collectionAmount, 0);
  const totalDeposit = detailedTransactions.reduce((sum, t) => sum + t.depositAmount, 0);
  const totalDifference = totalDeposit - totalCollection;

  // Per-currency totals from raw transactions, filtered to current selection
  const filteredRawTx = selectedEmployeeId === 'all'
    ? transactions
    : transactions.filter(t => t.employee_id === selectedEmployeeId);
  const totalCollectionUSD = filteredRawTx.filter(t => t.currency === 'USD').reduce((s, t) => s + t.collection_amount, 0);
  const totalCollectionLBP = filteredRawTx.filter(t => t.currency === 'LBP').reduce((s, t) => s + t.collection_amount, 0);
  const totalDepositUSD = filteredRawTx.filter(t => t.currency === 'USD').reduce((s, t) => s + t.deposit_amount, 0);
  const totalDepositLBP = filteredRawTx.filter(t => t.currency === 'LBP').reduce((s, t) => s + t.deposit_amount, 0);
  const totalDifferenceUSD = totalDepositUSD - totalCollectionUSD;
  const totalDifferenceLBP = totalDepositLBP - totalCollectionLBP;

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-purple-600">Employee Payment Report (Detailed)</h2>
        <div className="flex items-center gap-3">
          <span className="text-xs text-gray-500">Rate: 1 USD = {getUsdToLbpRate().toLocaleString()} LBP</span>
          <Select value={displayCurrency} onValueChange={(v) => setDisplayCurrency(v as Currency)}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="USD">View in USD</SelectItem>
              <SelectItem value="LBP">View in LBP</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="grid grid-cols-3 gap-6 mb-6">
        <Card className="bg-white shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center shrink-0">
                <div className="w-6 h-6 bg-gray-600 rounded-full"></div>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-gray-500 mb-1">Total Collection (MM)</p>
                <p className="text-xs text-gray-500">USD: <span className="font-medium text-gray-700">{formatCurrency(totalCollectionUSD, "USD")}</span></p>
                <p className="text-xs text-gray-500">LBP: <span className="font-medium text-gray-700">{formatCurrency(totalCollectionLBP, "LBP")}</span></p>
                <p className="text-lg font-bold text-gray-800 mt-1">≈ {formatCurrency(totalCollection, displayCurrency)}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-white shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center shrink-0">
                <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
                  <span className="text-white text-xs">✓</span>
                </div>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-gray-500 mb-1">Total Deposit Amount</p>
                <p className="text-xs text-gray-500">USD: <span className="font-medium text-gray-700">{formatCurrency(totalDepositUSD, "USD")}</span></p>
                <p className="text-xs text-gray-500">LBP: <span className="font-medium text-gray-700">{formatCurrency(totalDepositLBP, "LBP")}</span></p>
                <p className="text-lg font-bold text-gray-800 mt-1">≈ {formatCurrency(totalDeposit, displayCurrency)}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-white shadow-sm">
          <CardContent className="p-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center shrink-0">
                <div className="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
                  <span className="text-white text-xs">=</span>
                </div>
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-sm text-gray-500 mb-1">Net Difference</p>
                <p className="text-xs text-gray-500">USD: <span className={`font-medium ${totalDifferenceUSD >= 0 ? 'text-green-600' : 'text-red-600'}`}>{formatCurrency(totalDifferenceUSD, "USD")}</span></p>
                <p className="text-xs text-gray-500">LBP: <span className={`font-medium ${totalDifferenceLBP >= 0 ? 'text-green-600' : 'text-red-600'}`}>{formatCurrency(totalDifferenceLBP, "LBP")}</span></p>
                <p className={`text-lg font-bold mt-1 ${totalDifference >= 0 ? 'text-green-600' : 'text-red-600'}`}>
                  ≈ {formatCurrency(totalDifference, displayCurrency)}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filter */}
      <div className="flex items-center justify-between mb-4">
        <div></div>
        <Select value={selectedEmployeeId} onValueChange={setSelectedEmployeeId}>
          <SelectTrigger className="w-64">
            <SelectValue placeholder="Select employee" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Employees</SelectItem>
            {employees.map(employee => (
              <SelectItem key={employee.id} value={employee.id}>
                {employee.name} (ID: {employee.emp_id})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Data Table */}
      <div className="bg-white rounded-lg shadow-sm border">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50">
              <TableHead className="font-medium text-gray-600 py-4">Location</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Emp. ID</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Emp. Name</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Collections (MM)</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Date</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Cash Deposit</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Deposit Date</TableHead>
              <TableHead className="font-medium text-gray-600 py-4">Difference</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {detailedTransactions.map((transaction, index) => (
              <TableRow key={`${transaction.empId}-${index}`} className="hover:bg-gray-50 transition-colors duration-150">
                <TableCell className="py-4 text-gray-600">{transaction.location}</TableCell>
                <TableCell className="font-medium py-4">{transaction.empId}</TableCell>
                <TableCell className="py-4 font-medium text-gray-800">{transaction.empName}</TableCell>
                <TableCell className="py-4 font-medium">
                  {transaction.collectionAmount > 0 ? formatCurrency(transaction.collectionAmount, displayCurrency) : '-'}
                </TableCell>
                <TableCell className="py-4 text-gray-600">
                  {transaction.collectionDate ? formatDate(transaction.collectionDate) : '-'}
                </TableCell>
                <TableCell className="py-4 font-medium">
                  {transaction.depositAmount > 0 ? formatCurrency(transaction.depositAmount, displayCurrency) : '-'}
                </TableCell>
                <TableCell className="py-4 text-gray-600">
                  {transaction.depositDate ? formatDate(transaction.depositDate) : '-'}
                </TableCell>
                <TableCell className="py-4">
                  <span className={`font-medium ${
                    transaction.difference === 0 ? 'text-gray-600' : 
                    transaction.difference > 0 ? 'text-green-600' : 'text-red-600'
                  }`}>
                    {transaction.difference === 0 ? '-' : formatCurrency(transaction.difference, displayCurrency)}
                  </span>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {detailedTransactions.length === 0 && (
        <div className="text-center py-12">
          <div className="text-gray-400 text-lg mb-2">No transaction data available</div>
          <div className="text-gray-500">Use the "Insert Employee Data" button to add records</div>
        </div>
      )}
    </div>
  );
};