import React, { useState } from 'react';
import { DollarSign, Users, TrendingUp, Calculator, Plus, Search, X, Check, CreditCard, History, FileText } from 'lucide-react';

export default function LoanApp() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [loans, setLoans] = useState([
    { 
      id: 1, client: 'Juan Pérez', amount: 5000, rate: 12, term: 12, date: '2024-01-15', status: 'active',
      payments: Array.from({length: 12}, (_, i) => ({
        number: i + 1, amount: 444.24,
        dueDate: new Date(2024, i + 1, 15).toISOString().split('T')[0],
        paid: i < 3, paidDate: i < 3 ? new Date(2024, i + 1, 14).toISOString().split('T')[0] : null
      }))
    },
    { 
      id: 2, client: 'María García', amount: 10000, rate: 10, term: 24, date: '2024-02-20', status: 'active',
      payments: Array.from({length: 24}, (_, i) => ({
        number: i + 1, amount: 461.45,
        dueDate: new Date(2024, 2 + i, 20).toISOString().split('T')[0],
        paid: i < 5, paidDate: i < 5 ? new Date(2024, 2 + i, 19).toISOString().split('T')[0] : null
      }))
    },
    { 
      id: 3, client: 'Carlos López', amount: 3000, rate: 15, term: 6, date: '2024-03-10', status: 'paid',
      payments: Array.from({length: 6}, (_, i) => ({
        number: i + 1, amount: 521.27,
        dueDate: new Date(2024, 3 + i, 10).toISOString().split('T')[0],
        paid: true, paidDate: new Date(2024, 3 + i, 9).toISOString().split('T')[0]
      }))
    },
  ]);
  
  const [showNewLoan, setShowNewLoan] = useState(false);
  const [showDetail, setShowDetail] = useState(false);
  const [selected, setSelected] = useState(null);
  const [newLoan, setNewLoan] = useState({client: '', amount: '', rate: '', term: ''});
  const [calc, setCalc] = useState({amount: 10000, rate: 12, term: 12});
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState('all');

  const calcPayment = (p, r, m) => {
    const mr = r / 100 / 12;
    return (p * (mr * Math.pow(1 + mr, m)) / (Math.pow(1 + mr, m) - 1)).toFixed(2);
  };

  const addLoan = () => {
    if (!newLoan.client || !newLoan.amount || !newLoan.rate || !newLoan.term) return;
    const mp = parseFloat(calcPayment(parseFloat(newLoan.amount), parseFloat(newLoan.rate), parseInt(newLoan.term)));
    const loan = {
      id: loans.length + 1, client: newLoan.client, amount: parseFloat(newLoan.amount),
      rate: parseFloat(newLoan.rate), term: parseInt(newLoan.term),
      date: new Date().toISOString().split('T')[0], status: 'active',
      payments: Array.from({length: parseInt(newLoan.term)}, (_, i) => ({
        number: i + 1, amount: mp,
        dueDate: new Date(Date.now() + (i + 1) * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
        paid: false, paidDate: null
      }))
    };
    setLoans([...loans, loan]);
    setNewLoan({client: '', amount: '', rate: '', term: ''});
    setShowNewLoan(false);
  };

  const pay = (lid, pnum) => {
    const updatedLoans = loans.map(l => {
      if (l.id === lid) {
        const up = l.payments.map(p => p.number === pnum ? {...p, paid: true, paidDate: new Date().toISOString().split('T')[0]} : p);
        const updatedLoan = {...l, payments: up, status: up.every(p => p.paid) ? 'paid' : 'active'};
        setSelected(updatedLoan);
        return updatedLoan;
      }
      return l;
    });
    setLoans(updatedLoans);
  };

  const openDetail = (l) => { setSelected(l); setShowDetail(true); };
  const total = loans.reduce((s, l) => s + l.amount, 0);
  const active = loans.filter(l => l.status === 'active').length;
  const avgR = loans.length > 0 ? (loans.reduce((s, l) => s + l.rate, 0) / loans.length).toFixed(1) : 0;
  const history = loans.flatMap(l => l.payments.filter(p => p.paid).map(p => ({...p, client: l.client}))).sort((a, b) => new Date(b.paidDate) - new Date(a.paidDate));
  const filtered = loans.filter(l => l.client.toLowerCase().includes(search.toLowerCase()) && (filter === 'all' || l.status === filter));

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <header className="bg-white shadow-md">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <DollarSign className="w-8 h-8 text-indigo-600" />
              <h1 className="text-2xl font-bold text-gray-900">Sistema de Préstamos</h1>
            </div>
            <button onClick={() => setShowNewLoan(true)} className="flex items-center space-x-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
              <Plus className="w-5 h-5" />
              <span className="hidden sm:inline">Nuevo</span>
            </button>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 mt-6">
        <div className="bg-white rounded-lg shadow p-2 flex flex-wrap gap-2">
          {[
            {id: 'dashboard', label: 'Panel', icon: TrendingUp},
            {id: 'loans', label: 'Préstamos', icon: FileText},
            {id: 'history', label: 'Historial', icon: History},
            {id: 'calculator', label: 'Calculadora', icon: Calculator}
          ].map(t => (
            <button key={t.id} onClick={() => setActiveTab(t.id)}
              className={`flex-1 min-w-[100px] px-4 py-2 rounded-md font-medium flex items-center justify-center gap-2 ${
                activeTab === t.id ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:bg-gray-100'
              }`}>
              <t.icon className="w-4 h-4" />
              <span className="hidden sm:inline">{t.label}</span>
            </button>
          ))}
        </div>
      </div>

      <main className="max-w-7xl mx-auto px-4 py-6">
        {activeTab === 'dashboard' && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="bg-white rounded-lg shadow-md p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">Total Prestado</p>
                    <p className="text-2xl font-bold">${total.toLocaleString()}</p>
                  </div>
                  <DollarSign className="w-12 h-12 text-green-500" />
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">Activos</p>
                    <p className="text-2xl font-bold">{active}</p>
                  </div>
                  <Users className="w-12 h-12 text-blue-500" />
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-md p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">Tasa Promedio</p>
                    <p className="text-2xl font-bold">{avgR}%</p>
                  </div>
                  <TrendingUp className="w-12 h-12 text-purple-500" />
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-md p-6">
              <h2 className="text-xl font-bold mb-4">Préstamos Recientes</h2>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Cliente</th>
                      <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Monto</th>
                      <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Estado</th>
                      <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Acción</th>
                    </tr>
                  </thead>
                  <tbody>
                    {loans.slice(-3).reverse().map(l => (
                      <tr key={l.id} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-2 text-sm">{l.client}</td>
                        <td className="py-3 px-2 text-sm font-medium">${l.amount.toLocaleString()}</td>
                        <td className="py-3 px-2">
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${l.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
                            {l.status === 'active' ? 'Activo' : 'Pagado'}
                          </span>
                        </td>
                        <td className="py-3 px-2">
                          <button onClick={() => openDetail(l)} className="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Ver</button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'loans' && (
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
              <h2 className="text-xl font-bold">Todos los Préstamos</h2>
              <div className="flex gap-2 w-full sm:w-auto">
                <div className="relative flex-1 sm:flex-initial">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
                  <input type="text" placeholder="Buscar..." value={search} onChange={(e) => setSearch(e.target.value)}
                    className="pl-10 pr-4 py-2 border rounded-lg w-full focus:ring-2 focus:ring-indigo-500" />
                </div>
                <select value={filter} onChange={(e) => setFilter(e.target.value)} className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                  <option value="all">Todos</option>
                  <option value="active">Activos</option>
                  <option value="paid">Pagados</option>
                </select>
              </div>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Cliente</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Monto</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Progreso</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Estado</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Acción</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map(l => {
                    const paid = l.payments.filter(p => p.paid).length;
                    return (
                      <tr key={l.id} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-2 text-sm font-medium">{l.client}</td>
                        <td className="py-3 px-2 text-sm">${l.amount.toLocaleString()}</td>
                        <td className="py-3 px-2 text-sm">{paid}/{l.payments.length}</td>
                        <td className="py-3 px-2">
                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${l.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
                            {l.status === 'active' ? 'Activo' : 'Pagado'}
                          </span>
                        </td>
                        <td className="py-3 px-2">
                          <button onClick={() => openDetail(l)} className="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center gap-1">
                            <CreditCard className="w-4 h-4" />Pagos
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {activeTab === 'history' && (
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center space-x-3 mb-6">
              <History className="w-8 h-8 text-indigo-600" />
              <h2 className="text-xl font-bold">Historial de Pagos</h2>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Fecha</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Cliente</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Cuota</th>
                    <th className="text-left py-3 px-2 text-sm font-semibold text-gray-600">Monto</th>
                  </tr>
                </thead>
                <tbody>
                  {history.length === 0 ? (
                    <tr><td colSpan="4" className="text-center py-8 text-gray-500">No hay pagos</td></tr>
                  ) : (
                    history.map((p, i) => (
                      <tr key={i} className="border-b hover:bg-gray-50">
                        <td className="py-3 px-2 text-sm">{p.paidDate}</td>
                        <td className="py-3 px-2 text-sm font-medium">{p.client}</td>
                        <td className="py-3 px-2 text-sm">#{p.number}</td>
                        <td className="py-3 px-2 text-sm font-medium text-green-600">${p.amount.toFixed(2)}</td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {activeTab === 'calculator' && (
          <div className="bg-white rounded-lg shadow-md p-6">
            <div className="flex items-center space-x-3 mb-6">
              <Calculator className="w-8 h-8 text-indigo-600" />
              <h2 className="text-xl font-bold">Calculadora</h2>
            </div>
            <div className="grid md:grid-cols-2 gap-8">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2">Monto: ${calc.amount.toLocaleString()}</label>
                  <input type="range" min="1000" max="100000" step="1000" value={calc.amount}
                    onChange={(e) => setCalc({...calc, amount: parseFloat(e.target.value)})} className="w-full" />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">Tasa: {calc.rate}%</label>
                  <input type="range" min="1" max="30" step="0.5" value={calc.rate}
                    onChange={(e) => setCalc({...calc, rate: parseFloat(e.target.value)})} className="w-full" />
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">Plazo: {calc.term} meses</label>
                  <input type="range" min="6" max="60" step="6" value={calc.term}
                    onChange={(e) => setCalc({...calc, term: parseInt(e.target.value)})} className="w-full" />
                </div>
              </div>
              <div className="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg p-6 text-white">
                <h3 className="text-lg font-semibold mb-4">Resumen</h3>
                <div className="space-y-4">
                  <div className="flex justify-between pb-3 border-b border-white/20">
                    <span>Monto:</span>
                    <span className="text-2xl font-bold">${calc.amount.toLocaleString()}</span>
                  </div>
                  <div className="flex justify-between pb-3 border-b border-white/20">
                    <span>Cuota:</span>
                    <span className="text-2xl font-bold">${calcPayment(calc.amount, calc.rate, calc.term)}</span>
                  </div>
                  <div className="flex justify-between pb-3 border-b border-white/20">
                    <span>Total:</span>
                    <span className="text-xl font-bold">${(calcPayment(calc.amount, calc.rate, calc.term) * calc.term).toFixed(2)}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Interés:</span>
                    <span className="text-xl font-bold">${((calcPayment(calc.amount, calc.rate, calc.term) * calc.term) - calc.amount).toFixed(2)}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </main>

      {showNewLoan && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">Nuevo Préstamo</h3>
              <button onClick={() => setShowNewLoan(false)}><X className="w-6 h-6" /></button>
            </div>
            <div className="space-y-4">
              <input type="text" placeholder="Cliente" value={newLoan.client} onChange={(e) => setNewLoan({...newLoan, client: e.target.value})}
                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500" />
              <input type="number" placeholder="Monto" value={newLoan.amount} onChange={(e) => setNewLoan({...newLoan, amount: e.target.value})}
                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500" />
              <input type="number" placeholder="Tasa %" step="0.1" value={newLoan.rate} onChange={(e) => setNewLoan({...newLoan, rate: e.target.value})}
                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500" />
              <input type="number" placeholder="Plazo (meses)" value={newLoan.term} onChange={(e) => setNewLoan({...newLoan, term: e.target.value})}
                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500" />
              <div className="flex gap-2 pt-4">
                <button onClick={() => setShowNewLoan(false)} className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50">Cancelar</button>
                <button onClick={addLoan} className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Crear</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {showDetail && selected && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b sticky top-0 bg-white">
              <div className="flex justify-between">
                <div>
                  <h3 className="text-2xl font-bold">{selected.client}</h3>
                  <p className="text-gray-600">Préstamo #{selected.id}</p>
                </div>
                <button onClick={() => setShowDetail(false)}><X className="w-6 h-6" /></button>
              </div>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
                <div><p className="text-sm text-gray-600">Monto</p><p className="font-bold">${selected.amount.toLocaleString()}</p></div>
                <div><p className="text-sm text-gray-600">Tasa</p><p className="font-bold">{selected.rate}%</p></div>
                <div><p className="text-sm text-gray-600">Plazo</p><p className="font-bold">{selected.term} meses</p></div>
                <div><p className="text-sm text-gray-600">Cuota</p><p className="font-bold">${calcPayment(selected.amount, selected.rate, selected.term)}</p></div>
              </div>
            </div>
            <div className="p-6">
              <h4 className="font-bold mb-4">Tabla de Pagos</h4>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 px-2 text-sm">Cuota</th>
                      <th className="text-left py-2 px-2 text-sm">Vencimiento</th>
                      <th className="text-left py-2 px-2 text-sm">Monto</th>
                      <th className="text-left py-2 px-2 text-sm">Estado</th>
                      <th className="text-left py-2 px-2 text-sm">Acción</th>
                    </tr>
                  </thead>
                  <tbody>
                    {selected.payments.map(p => (
                      <tr key={p.number} className="border-b hover:bg-gray-50">
                        <td className="py-2 px-2 text-sm">#{p.number}</td>
                        <td className="py-2 px-2 text-sm">{p.dueDate}</td>
                        <td className="py-2 px-2 text-sm font-medium">${p.amount.toFixed(2)}</td>
                        <td className="py-2 px-2">
                          {p.paid ? (
                            <span className="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800 flex items-center gap-1 w-fit">
                              <Check className="w-3 h-3" />Pagado
                            </span>
                          ) : (
                            <span className="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">Pendiente</span>
                          )}
                        </td>
                        <td className="py-2 px-2">
                          {!p.paid && (
                            <button onClick={() => pay(selected.id, p.number)} className="px-3 py-1 bg-indigo-600 text-white text-sm rounded hover:bg-indigo-700">
                              Pagar
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}