import React, { useEffect, useState, useMemo } from 'react';
import { CondoService } from '../services/mockDb';
import { Payment, Family, Condo, CondoExpense } from '../types';
import { PieChart, Download, Calendar, Search, CreditCard, Banknote, Filter, ArrowUpRight, TrendingDown, Wallet, ArrowDownRight } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const MONTH_NAMES = [
  "Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno",
  "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"
];

export const ReportsPage: React.FC = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [payments, setPayments] = useState<Payment[]>([]); // Entrate
  const [expenses, setExpenses] = useState<CondoExpense[]>([]); // Uscite
  const [families, setFamilies] = useState<Family[]>([]);
  const [activeCondo, setActiveCondo] = useState<Condo | undefined>(undefined);
  const [availableYears, setAvailableYears] = useState<number[]>([]);

  // Filters
  const [selectedYear, setSelectedYear] = useState<number>(new Date().getFullYear());
  const [selectedMonth, setSelectedMonth] = useState<number | 'ALL'>('ALL');
  const [searchTerm, setSearchTerm] = useState('');
  
  // Tab View
  const [activeTab, setActiveTab] = useState<'income' | 'expenses' | 'balance'>('balance');

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const settings = await CondoService.getSettings();
        if (!settings.features.reports) {
            navigate('/');
            return;
        }

        const condo = await CondoService.getActiveCondo();
        setActiveCondo(condo);

        if (condo) {
            const [payList, expList, famList, years] = await Promise.all([
                CondoService.getCondoPayments(condo.id),
                CondoService.getCondoExpenses(undefined), // Fetch ALL to filter locally or by year later
                CondoService.getFamilies(condo.id),
                CondoService.getAvailableYears()
            ]);
            setPayments(payList);
            setExpenses(expList);
            setFamilies(famList);
            setAvailableYears(years);
            if (years.length > 0 && !years.includes(selectedYear)) {
                setSelectedYear(years[0]);
            }
        }
      } catch (e) {
        console.error("Error loading reports", e);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [navigate]);

  // --- FILTERED INCOME DATA (Payments from Families) ---
  const filteredIncome = useMemo(() => {
    return payments.filter(p => {
        const matchesYear = p.forYear === selectedYear;
        const matchesMonth = selectedMonth === 'ALL' || p.forMonth === selectedMonth;
        
        const familyName = families.find(f => f.id === p.familyId)?.name.toLowerCase() || '';
        const matchesSearch = searchTerm === '' || 
                              familyName.includes(searchTerm.toLowerCase()) || 
                              (p.notes && p.notes.toLowerCase().includes(searchTerm.toLowerCase()));

        return matchesYear && matchesMonth && matchesSearch;
    }).map(p => {
        const isPayPal = p.notes && p.notes.includes("PayPal");
        const family = families.find(f => f.id === p.familyId);
        return {
            ...p,
            familyName: family ? family.name : 'Sconosciuto',
            familyUnit: family ? family.unitNumber : '-',
            method: isPayPal ? 'PayPal' : 'Manuale'
        };
    });
  }, [payments, families, selectedYear, selectedMonth, searchTerm]);

  // --- FILTERED EXPENSES DATA (Payments to Suppliers) ---
  const filteredExpenses = useMemo(() => {
      return expenses.filter(e => {
          // Determine "Year" and "Month" for expense. Use Payment Date if exists, else CreatedAt
          const dateRef = e.paymentDate ? new Date(e.paymentDate) : new Date(e.createdAt);
          const expYear = dateRef.getFullYear();
          const expMonth = dateRef.getMonth() + 1; // 1-12

          const matchesYear = expYear === selectedYear;
          const matchesMonth = selectedMonth === 'ALL' || expMonth === selectedMonth;
          
          const matchesSearch = searchTerm === '' ||
                                e.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
                                e.supplierName.toLowerCase().includes(searchTerm.toLowerCase());
          
          return matchesYear && matchesMonth && matchesSearch;
      });
  }, [expenses, selectedYear, selectedMonth, searchTerm]);

  // Statistics Calculation
  const stats = useMemo(() => {
      // Income Stats
      const totalIncome = filteredIncome.reduce((acc, curr) => acc + curr.amount, 0);
      const incomeCount = filteredIncome.length;
      
      // Expense Stats
      const totalExpenses = filteredExpenses.reduce((acc, curr) => acc + curr.amount, 0);
      const expenseCount = filteredExpenses.length;
      const paidExpenses = filteredExpenses.filter(e => e.status === 'PAID').reduce((acc, curr) => acc + curr.amount, 0);

      // Balance
      const balance = totalIncome - totalExpenses;

      return { totalIncome, incomeCount, totalExpenses, expenseCount, paidExpenses, balance };
  }, [filteredIncome, filteredExpenses]);

  const getMonthLabel = (month: number) => {
      if (month === 13) return "Extra";
      if (month >= 1 && month <= 12) return MONTH_NAMES[month - 1];
      return "-";
  };

  const handleExportCSV = () => {
      if (!activeCondo) return;
      
      let headers: string[] = [];
      let rows: string[][] = [];
      let filename = "";

      if (activeTab === 'income' || activeTab === 'balance') {
          // Export Income
          headers = ["Data Pagamento", "Famiglia", "Interno", "Mese Rif.", "Anno Rif.", "Importo", "Metodo", "Note"];
          rows = filteredIncome.map(p => [
              new Date(p.datePaid).toLocaleDateString(),
              p.familyName,
              p.familyUnit,
              getMonthLabel(p.forMonth),
              p.forYear.toString(),
              p.amount.toFixed(2),
              p.method,
              p.notes ? `"${p.notes.replace(/"/g, '""')}"` : ""
          ]);
          filename = `Report_Entrate_${activeCondo.name}_${selectedYear}.csv`;
      } else {
          // Export Expenses
          headers = ["Data", "Fornitore", "Descrizione", "Importo", "Stato", "Metodo", "Fattura"];
          rows = filteredExpenses.map(e => [
               e.paymentDate ? new Date(e.paymentDate).toLocaleDateString() : new Date(e.createdAt).toLocaleDateString(),
               e.supplierName,
               `"${e.description}"`,
               e.amount.toFixed(2),
               e.status,
               e.paymentMethod || '',
               e.invoiceNumber || ''
          ]);
          filename = `Report_Uscite_${activeCondo.name}_${selectedYear}.csv`;
      }

      const csvContent = "data:text/csv;charset=utf-8," 
          + headers.join(",") + "\n" 
          + rows.map(e => e.join(",")).join("\n");

      const encodedUri = encodeURI(csvContent);
      const link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
  };

  if (loading) return <div className="p-8 text-center text-slate-400">Caricamento report...</div>;

  return (
    <div className="space-y-6 pb-20 animate-fade-in">
        <div className="flex flex-col md:flex-row justify-between md:items-end gap-4">
            <div>
                <h2 className="text-2xl font-bold text-slate-800 flex items-center gap-2">
                    <PieChart className="w-6 h-6 text-blue-600"/> Reportistica & Bilancio
                </h2>
                <p className="text-slate-500 text-sm">Analisi finanziaria per {activeCondo?.name}</p>
            </div>
            
            <div className="flex gap-2">
                <button onClick={handleExportCSV} className="bg-slate-800 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 hover:bg-slate-900 transition-colors">
                    <Download className="w-4 h-4"/> Export CSV
                </button>
            </div>
        </div>

        {/* Filters Bar */}
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex flex-col md:flex-row gap-4">
            <div className="flex-1 grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Anno</label>
                    <select 
                        value={selectedYear} 
                        onChange={e => setSelectedYear(parseInt(e.target.value))}
                        className="w-full border p-2 rounded-lg text-slate-700 bg-slate-50 font-medium"
                    >
                        {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
                    </select>
                </div>
                <div>
                    <label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Mese</label>
                    <select 
                        value={selectedMonth} 
                        onChange={e => setSelectedMonth(e.target.value === 'ALL' ? 'ALL' : parseInt(e.target.value))}
                        className="w-full border p-2 rounded-lg text-slate-700 bg-slate-50 font-medium"
                    >
                        <option value="ALL">Tutti</option>
                        {MONTH_NAMES.map((m, i) => <option key={i} value={i+1}>{m}</option>)}
                        <option value={13}>Spese Extra</option>
                    </select>
                </div>
                <div className="col-span-2">
                    <label className="text-xs font-bold text-slate-500 uppercase mb-1 block">Cerca...</label>
                    <div className="relative">
                        <input 
                            type="text" 
                            placeholder={activeTab === 'income' ? "Cerca Famiglia..." : "Cerca Fornitore..."}
                            value={searchTerm}
                            onChange={e => setSearchTerm(e.target.value)}
                            className="w-full border p-2 pl-9 rounded-lg text-slate-700 bg-slate-50"
                        />
                        <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5"/>
                    </div>
                </div>
            </div>
        </div>
        
        {/* TABS */}
        <div className="flex border-b border-slate-200">
             <button onClick={() => setActiveTab('balance')} className={`px-4 py-2 font-medium text-sm flex items-center gap-2 border-b-2 transition-colors ${activeTab === 'balance' ? 'border-blue-600 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>
                 <Wallet className="w-4 h-4"/> Bilancio
             </button>
             <button onClick={() => setActiveTab('income')} className={`px-4 py-2 font-medium text-sm flex items-center gap-2 border-b-2 transition-colors ${activeTab === 'income' ? 'border-green-600 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>
                 <ArrowUpRight className="w-4 h-4"/> Entrate (Rate)
             </button>
             <button onClick={() => setActiveTab('expenses')} className={`px-4 py-2 font-medium text-sm flex items-center gap-2 border-b-2 transition-colors ${activeTab === 'expenses' ? 'border-red-600 text-red-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>
                 <TrendingDown className="w-4 h-4"/> Uscite (Fornitori)
             </button>
        </div>

        {/* Overview Cards (Dynamic based on Tab) */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* IN (Always shown or contextual) */}
            <div className={`p-6 rounded-xl shadow-lg transition-all ${activeTab === 'expenses' ? 'bg-white border border-slate-200 opacity-60' : 'bg-green-600 text-white shadow-green-200'}`}>
                <p className={`${activeTab === 'expenses' ? 'text-slate-500' : 'text-green-100'} text-sm font-medium mb-1`}>Totale Entrate</p>
                <h3 className={`text-3xl font-bold ${activeTab === 'expenses' ? 'text-slate-800' : ''}`}>€ {stats.totalIncome.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
            </div>

            {/* OUT */}
            <div className={`p-6 rounded-xl shadow-lg transition-all ${activeTab === 'income' ? 'bg-white border border-slate-200 opacity-60' : 'bg-red-600 text-white shadow-red-200'}`}>
                 <p className={`${activeTab === 'income' ? 'text-slate-500' : 'text-red-100'} text-sm font-medium mb-1`}>Totale Uscite</p>
                 <h3 className={`text-3xl font-bold ${activeTab === 'income' ? 'text-slate-800' : ''}`}>€ {stats.totalExpenses.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
            </div>

            {/* BALANCE */}
            <div className={`p-6 rounded-xl shadow-lg border transition-all bg-white border-slate-200`}>
                 <p className="text-slate-500 text-sm font-medium mb-1 uppercase">Saldo Periodo</p>
                 <h3 className={`text-3xl font-bold ${stats.balance >= 0 ? 'text-blue-600' : 'text-red-600'}`}>€ {stats.balance.toLocaleString('it-IT', { minimumFractionDigits: 2 })}</h3>
                 <p className="text-xs text-slate-400 mt-1">Differenza Entrate - Uscite</p>
            </div>
        </div>

        {/* MAIN DATA TABLE */}
        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div className="p-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
                <h3 className="font-bold text-slate-800">
                    {activeTab === 'income' ? 'Dettaglio Versamenti Famiglie' : activeTab === 'expenses' ? 'Dettaglio Spese Fornitori' : 'Movimenti Recenti'}
                </h3>
            </div>
            <div className="overflow-x-auto">
                {activeTab === 'expenses' ? (
                     // EXPENSES TABLE
                     <table className="w-full text-left text-sm text-slate-600">
                        <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200">
                            <tr>
                                <th className="px-6 py-3">Data</th>
                                <th className="px-6 py-3">Fornitore</th>
                                <th className="px-6 py-3">Descrizione</th>
                                <th className="px-6 py-3">Stato</th>
                                <th className="px-6 py-3 text-right">Importo</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                            {filteredExpenses.length === 0 ? (
                                <tr><td colSpan={5} className="p-8 text-center text-slate-400">Nessuna spesa trovata.</td></tr>
                            ) : (
                                filteredExpenses.map(e => (
                                    <tr key={e.id} className="hover:bg-slate-50 transition-colors">
                                        <td className="px-6 py-4">
                                            {e.paymentDate ? new Date(e.paymentDate).toLocaleDateString() : new Date(e.createdAt).toLocaleDateString()}
                                        </td>
                                        <td className="px-6 py-4 font-bold text-slate-700">{e.supplierName}</td>
                                        <td className="px-6 py-4">{e.description}</td>
                                        <td className="px-6 py-4">
                                            <span className={`px-2 py-1 rounded-full text-[10px] font-bold uppercase ${
                                                e.status === 'PAID' ? 'bg-green-100 text-green-700' :
                                                e.status === 'SUSPENDED' ? 'bg-amber-100 text-amber-700' :
                                                'bg-red-100 text-red-700'
                                            }`}>
                                                {e.status === 'PAID' ? 'Saldato' : e.status === 'SUSPENDED' ? 'Sospeso' : 'Insoluto'}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 text-right font-bold text-slate-800">
                                            € {e.amount.toFixed(2)}
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                     </table>
                ) : (
                    // INCOME TABLE (Default for Balance too)
                    <table className="w-full text-left text-sm text-slate-600">
                        <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200">
                            <tr>
                                <th className="px-6 py-3 whitespace-nowrap">Data</th>
                                <th className="px-6 py-3">Famiglia</th>
                                <th className="px-6 py-3">Riferimento</th>
                                <th className="px-6 py-3">Metodo</th>
                                <th className="px-6 py-3">Note</th>
                                <th className="px-6 py-3 text-right">Importo</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                            {filteredIncome.length === 0 ? (
                                <tr><td colSpan={6} className="p-8 text-center text-slate-400">Nessuna transazione trovata.</td></tr>
                            ) : (
                                filteredIncome.map((t) => (
                                    <tr key={t.id} className="hover:bg-slate-50 transition-colors">
                                        <td className="px-6 py-4 whitespace-nowrap text-slate-500 font-medium">
                                            <div className="flex items-center gap-2">
                                                <Calendar className="w-4 h-4 text-slate-300"/>
                                                {new Date(t.datePaid).toLocaleDateString()}
                                            </div>
                                        </td>
                                        <td className="px-6 py-4">
                                            <div className="font-bold text-slate-700">{t.familyName}</div>
                                            <div className="text-xs text-slate-400">Int. {t.familyUnit}</div>
                                        </td>
                                        <td className="px-6 py-4">
                                            <span className="bg-slate-100 text-slate-600 px-2 py-1 rounded text-xs font-bold uppercase">
                                                {getMonthLabel(t.forMonth).substring(0, 5)} {t.forYear}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4">
                                            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-bold uppercase ${t.method === 'PayPal' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'}`}>
                                                {t.method === 'PayPal' ? <CreditCard className="w-3 h-3"/> : <Banknote className="w-3 h-3"/>}
                                                {t.method}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4 max-w-xs truncate text-slate-500 text-xs" title={t.notes}>
                                            {t.notes || '-'}
                                        </td>
                                        <td className="px-6 py-4 text-right font-bold text-slate-800">
                                            € {t.amount.toFixed(2)}
                                        </td>
                                    </tr>
                                ))
                            )}
                        </tbody>
                    </table>
                )}
            </div>
        </div>
    </div>
  );
};