import React, { useState, useRef } from 'react';
import { Proposal, ProposalItem } from '../types';
import { useComFi } from '../contexts/ComFiContext';
import { useToast } from '../contexts/ToastContext';
import { CustomSelect } from './CustomSelect';
import { 
  FileText, Plus, Trash2, Printer, Edit2, CheckCircle2, 
  Send, X, Search, ChevronLeft, Building2, Calendar, DollarSign, Save
} from 'lucide-react';

export const ProposalsView: React.FC = () => {
  const { proposals, setProposals, companies, services, tenant } = useComFi();
  const { addToast } = useToast();
  const [viewMode, setViewMode] = useState<'list' | 'create' | 'edit'>('list');
  const [searchTerm, setSearchTerm] = useState('');
  
  // Form State
  const [currentProposal, setCurrentProposal] = useState<Partial<Proposal>>({
    items: [],
    issueDate: new Date().toISOString().split('T')[0],
    validUntil: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
    status: 'draft',
    notes: 'Validade da proposta: 15 dias.\nPagamento: 50% entrada, 50% na entrega.'
  });

  // Items Management
  const [newItemServiceId, setNewItemServiceId] = useState('');

  const calculateTotal = (items: ProposalItem[]) => items.reduce((acc, item) => acc + item.total, 0);

  const handleAddItem = () => {
    if (!newItemServiceId) return;
    const service = services.find(s => s.id === newItemServiceId);
    if (!service) return;

    const newItem: ProposalItem = {
      id: Math.random().toString(36).substr(2, 9),
      serviceId: service.id,
      description: service.name,
      quantity: 1,
      unitPrice: service.price,
      total: service.price
    };

    const updatedItems = [...(currentProposal.items || []), newItem];
    setCurrentProposal({ 
      ...currentProposal, 
      items: updatedItems,
      totalValue: calculateTotal(updatedItems)
    });
    setNewItemServiceId('');
  };

  const handleRemoveItem = (itemId: string) => {
    const updatedItems = (currentProposal.items || []).filter(i => i.id !== itemId);
    setCurrentProposal({
      ...currentProposal,
      items: updatedItems,
      totalValue: calculateTotal(updatedItems)
    });
  };

  const handleUpdateItem = (itemId: string, field: 'quantity' | 'unitPrice', value: number) => {
    const updatedItems = (currentProposal.items || []).map(item => {
      if (item.id === itemId) {
        const updatedItem = { ...item, [field]: value };
        updatedItem.total = updatedItem.quantity * updatedItem.unitPrice;
        return updatedItem;
      }
      return item;
    });
    setCurrentProposal({
      ...currentProposal,
      items: updatedItems,
      totalValue: calculateTotal(updatedItems)
    });
  };

  const handleSave = () => {
    if (!currentProposal.clientId || !currentProposal.items?.length) {
      addToast({ type: 'warning', title: 'Dados Incompletos', message: 'Selecione um cliente e adicione itens.' });
      return;
    }

    const client = companies.find(c => c.id === currentProposal.clientId);
    const proposalToSave: Proposal = {
      ...currentProposal,
      id: currentProposal.id || Math.random().toString(36).substr(2, 9),
      number: currentProposal.number || `PROP-${new Date().getFullYear()}-${Math.floor(Math.random() * 1000)}`,
      clientName: client?.fantasyName || client?.name || 'Cliente',
      clientEmail: client?.email,
      totalValue: calculateTotal(currentProposal.items || [])
    } as Proposal;

    if (viewMode === 'edit') {
      setProposals(proposals.map(p => p.id === proposalToSave.id ? proposalToSave : p));
      addToast({ type: 'success', title: 'Proposta Atualizada' });
    } else {
      setProposals([...proposals, proposalToSave]);
      addToast({ type: 'success', title: 'Proposta Criada' });
    }
    setViewMode('list');
  };

  const handleDelete = (id: string) => {
    if (window.confirm('Excluir esta proposta?')) {
      setProposals(proposals.filter(p => p.id !== id));
      addToast({ type: 'info', title: 'Proposta Removida' });
    }
  };

  const openCreate = () => {
    setCurrentProposal({
        items: [],
        issueDate: new Date().toISOString().split('T')[0],
        validUntil: new Date(Date.now() + 15 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
        status: 'draft',
        notes: 'Validade da proposta: 15 dias.\nPagamento: 50% entrada, 50% na entrega.'
    });
    setViewMode('create');
  };

  const openEdit = (proposal: Proposal) => {
    setCurrentProposal(proposal);
    setViewMode('edit');
  };

  const handlePrint = () => {
    window.print();
  };

  // --- RENDER ---

  if (viewMode === 'create' || viewMode === 'edit') {
    const client = companies.find(c => c.id === currentProposal.clientId);

    return (
      <div className="space-y-6 animate-fade-in relative">
        {/* Print Styles */}
        <style>{`
          @media print {
            body * { visibility: hidden; }
            #proposal-document, #proposal-document * { visibility: visible; }
            #proposal-document { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; background: white; box-shadow: none; border: none; }
            .no-print { display: none !important; }
          }
        `}</style>

        {/* Header / Actions */}
        <div className="flex justify-between items-center no-print">
          <button onClick={() => setViewMode('list')} className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-xl hover:bg-slate-50 transition-colors text-slate-600 font-medium">
            <ChevronLeft size={18} /> Voltar
          </button>
          <div className="flex gap-2">
            <button onClick={handlePrint} className="flex items-center gap-2 px-4 py-2 bg-slate-800 text-white rounded-xl hover:bg-slate-900 font-bold transition-all shadow-lg">
              <Printer size={18} /> Imprimir / PDF
            </button>
            <button onClick={handleSave} className="flex items-center gap-2 px-6 py-2 bg-primary-500 text-white rounded-xl hover:bg-primary-600 font-bold transition-all shadow-lg shadow-primary-200">
              <Save size={18} /> Salvar
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          
          {/* Editor Panel (Left) */}
          <div className="lg:col-span-1 space-y-6 no-print">
             <div className="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
                <h3 className="font-bold text-slate-800 text-lg mb-4 flex items-center gap-2"><Building2 size={18}/> Cliente & Detalhes</h3>
                <div className="space-y-4">
                   <div>
                      <label className="block text-xs font-bold text-slate-500 mb-1 uppercase">Cliente</label>
                      <CustomSelect 
                        value={currentProposal.clientId || ''}
                        onChange={(val) => setCurrentProposal({...currentProposal, clientId: val})}
                        placeholder="Selecione o Cliente"
                        options={companies.map(c => ({ value: c.id, label: c.fantasyName || c.name }))}
                      />
                   </div>
                   <div className="grid grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs font-bold text-slate-500 mb-1 uppercase">Emissão</label>
                        <input type="date" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-200" value={currentProposal.issueDate} onChange={e => setCurrentProposal({...currentProposal, issueDate: e.target.value})} />
                      </div>
                      <div>
                        <label className="block text-xs font-bold text-slate-500 mb-1 uppercase">Validade</label>
                        <input type="date" className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-200" value={currentProposal.validUntil} onChange={e => setCurrentProposal({...currentProposal, validUntil: e.target.value})} />
                      </div>
                   </div>
                   <div>
                      <label className="block text-xs font-bold text-slate-500 mb-1 uppercase">Status</label>
                      <CustomSelect 
                        value={currentProposal.status || 'draft'}
                        onChange={(val) => setCurrentProposal({...currentProposal, status: val})}
                        options={[
                            { value: 'draft', label: 'Rascunho' },
                            { value: 'sent', label: 'Enviado' },
                            { value: 'accepted', label: 'Aceito' },
                            { value: 'rejected', label: 'Rejeitado' }
                        ]}
                      />
                   </div>
                </div>
             </div>

             <div className="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
                <h3 className="font-bold text-slate-800 text-lg mb-4 flex items-center gap-2"><Plus size={18}/> Adicionar Item</h3>
                <div className="flex gap-2 mb-2">
                   <div className="flex-1">
                     <CustomSelect 
                        value={newItemServiceId}
                        onChange={setNewItemServiceId}
                        placeholder="Selecione um serviço..."
                        options={services.map(s => ({ value: s.id, label: `${s.name} (R$ ${s.price})` }))}
                     />
                   </div>
                   <button onClick={handleAddItem} className="bg-slate-800 text-white p-3 rounded-xl hover:bg-slate-900 transition-colors"><Plus size={20}/></button>
                </div>
             </div>

             <div className="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
                <h3 className="font-bold text-slate-800 text-lg mb-4">Notas & Observações</h3>
                <textarea 
                  className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-primary-200 h-32"
                  value={currentProposal.notes}
                  onChange={e => setCurrentProposal({...currentProposal, notes: e.target.value})}
                  placeholder="Termos de pagamento, prazos, etc."
                ></textarea>
             </div>
          </div>

          {/* Preview Panel (Right) - The "Paper" */}
          <div className="lg:col-span-2">
             <div id="proposal-document" className="bg-white w-full max-w-[210mm] mx-auto min-h-[297mm] p-[15mm] shadow-2xl rounded-sm text-slate-800 relative">
                
                {/* Header Documento */}
                <div className="flex justify-between items-start border-b-2 border-primary-500 pb-8 mb-8">
                   <div>
                      {tenant.logo ? (
                          <img src={tenant.logo} className="h-16 object-contain mb-2" alt="Logo" />
                      ) : (
                          <h1 className="text-3xl font-bold text-slate-900">{tenant.name}</h1>
                      )}
                      <p className="text-sm text-slate-500 max-w-xs">{tenant.address}</p>
                      <p className="text-sm text-slate-500">{tenant.email} | {tenant.phone}</p>
                   </div>
                   <div className="text-right">
                      <h2 className="text-4xl font-bold text-slate-200 uppercase tracking-widest">Proposta</h2>
                      <p className="text-lg font-bold text-primary-600 mt-2">{currentProposal.number || 'RASCUNHO'}</p>
                      <p className="text-sm text-slate-500 mt-1">Data: {new Date(currentProposal.issueDate || '').toLocaleDateString('pt-BR')}</p>
                      <p className="text-sm text-slate-500">Válido até: {new Date(currentProposal.validUntil || '').toLocaleDateString('pt-BR')}</p>
                   </div>
                </div>

                {/* Info Cliente */}
                <div className="mb-10">
                   <h3 className="text-xs font-bold text-slate-400 uppercase mb-2">Preparado para:</h3>
                   <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                      {client ? (
                          <>
                            <h4 className="text-xl font-bold text-slate-800">{client.fantasyName || client.name}</h4>
                            <p className="text-sm text-slate-600">{client.address} - {client.city}</p>
                            <p className="text-sm text-slate-600">CNPJ: {client.cnpj}</p>
                            <p className="text-sm text-slate-600">{client.email}</p>
                          </>
                      ) : (
                          <p className="text-slate-400 italic">Selecione um cliente...</p>
                      )}
                   </div>
                </div>

                {/* Items Table */}
                <div className="mb-8">
                   <table className="w-full text-left border-collapse">
                      <thead>
                         <tr className="border-b-2 border-slate-100">
                            <th className="py-3 text-xs font-bold text-slate-500 uppercase w-1/2">Descrição / Serviço</th>
                            <th className="py-3 text-xs font-bold text-slate-500 uppercase text-center">Qtd</th>
                            <th className="py-3 text-xs font-bold text-slate-500 uppercase text-right">Valor Unit.</th>
                            <th className="py-3 text-xs font-bold text-slate-500 uppercase text-right">Total</th>
                            <th className="py-3 w-8 no-print"></th>
                         </tr>
                      </thead>
                      <tbody>
                         {(currentProposal.items || []).map((item) => (
                            <tr key={item.id} className="border-b border-slate-50 group">
                               <td className="py-4">
                                  <span className="font-bold text-slate-700 block">{item.description}</span>
                               </td>
                               <td className="py-4 text-center">
                                  <input 
                                    type="number" 
                                    min="1"
                                    className="w-16 text-center bg-transparent border border-transparent hover:border-slate-200 rounded p-1 outline-none focus:border-primary-300 transition-colors"
                                    value={item.quantity}
                                    onChange={(e) => handleUpdateItem(item.id, 'quantity', Number(e.target.value))}
                                  />
                               </td>
                               <td className="py-4 text-right">
                                  <div className="flex justify-end items-center gap-1">
                                    <span className="text-xs text-slate-400">R$</span>
                                    <input 
                                        type="number" 
                                        className="w-24 text-right bg-transparent border border-transparent hover:border-slate-200 rounded p-1 outline-none focus:border-primary-300 transition-colors"
                                        value={item.unitPrice}
                                        onChange={(e) => handleUpdateItem(item.id, 'unitPrice', Number(e.target.value))}
                                    />
                                  </div>
                               </td>
                               <td className="py-4 text-right font-bold text-slate-800">
                                  R$ {item.total.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                               </td>
                               <td className="py-4 text-right no-print">
                                  <button onClick={() => handleRemoveItem(item.id)} className="text-slate-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all"><Trash2 size={16}/></button>
                               </td>
                            </tr>
                         ))}
                         {(currentProposal.items || []).length === 0 && (
                             <tr><td colSpan={5} className="py-8 text-center text-slate-300 italic">Nenhum item adicionado</td></tr>
                         )}
                      </tbody>
                   </table>
                </div>

                {/* Totals */}
                <div className="flex justify-end mb-12">
                   <div className="w-1/2">
                      <div className="flex justify-between items-center py-2 border-b border-slate-100">
                         <span className="text-slate-500 font-medium">Subtotal</span>
                         <span className="text-slate-800 font-bold">R$ {calculateTotal(currentProposal.items || []).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</span>
                      </div>
                      <div className="flex justify-between items-center py-4">
                         <span className="text-lg text-slate-800 font-bold">Total Geral</span>
                         <span className="text-2xl text-primary-600 font-bold">R$ {calculateTotal(currentProposal.items || []).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</span>
                      </div>
                   </div>
                </div>

                {/* Footer Notes */}
                <div className="border-t-2 border-slate-100 pt-6">
                   <h4 className="text-sm font-bold text-slate-800 mb-2">Termos e Condições</h4>
                   <p className="text-sm text-slate-500 whitespace-pre-line">{currentProposal.notes}</p>
                </div>

                {/* Signature Area */}
                <div className="absolute bottom-[15mm] left-[15mm] right-[15mm] flex justify-between mt-20">
                    <div className="w-1/3 border-t border-slate-300 pt-2 text-center">
                        <p className="text-xs font-bold text-slate-600">{tenant.name}</p>
                        <p className="text-[10px] text-slate-400">Assinatura do Emissor</p>
                    </div>
                    <div className="w-1/3 border-t border-slate-300 pt-2 text-center">
                        <p className="text-xs font-bold text-slate-600">{client?.name || 'Cliente'}</p>
                        <p className="text-[10px] text-slate-400">De acordo</p>
                    </div>
                </div>

             </div>
          </div>
        </div>
      </div>
    );
  }

  // LIST VIEW
  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex flex-col md:flex-row justify-between items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-800">Propostas Comerciais</h1>
          <p className="text-slate-500">Crie orçamentos e gerencie negociações.</p>
        </div>
        <button onClick={openCreate} className="flex items-center gap-2 px-5 py-2.5 bg-primary-500 text-white rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-200/50 transition-all font-bold">
          <Plus size={18} /> Nova Proposta
        </button>
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
         {/* Toolbar */}
         <div className="p-4 border-b border-slate-100 flex gap-4">
            <div className="relative max-w-md flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
                <input 
                    type="text" 
                    placeholder="Buscar proposta..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border-none rounded-xl focus:ring-2 focus:ring-primary-500 outline-none text-slate-600"
                />
            </div>
         </div>

         {/* Table */}
         <div className="overflow-x-auto">
            <table className="w-full text-left">
               <thead className="bg-slate-50/50">
                  <tr>
                     <th className="p-4 text-xs font-bold uppercase text-slate-500">Número</th>
                     <th className="p-4 text-xs font-bold uppercase text-slate-500">Cliente</th>
                     <th className="p-4 text-xs font-bold uppercase text-slate-500">Emissão</th>
                     <th className="p-4 text-xs font-bold uppercase text-slate-500">Valor</th>
                     <th className="p-4 text-xs font-bold uppercase text-slate-500 text-center">Status</th>
                     <th className="p-4"></th>
                  </tr>
               </thead>
               <tbody className="divide-y divide-slate-50">
                  {proposals.filter(p => p.clientName.toLowerCase().includes(searchTerm.toLowerCase()) || p.number.toLowerCase().includes(searchTerm.toLowerCase())).map(prop => (
                     <tr key={prop.id} className="hover:bg-slate-50 transition-colors group">
                        <td className="p-4 font-bold text-slate-800">{prop.number}</td>
                        <td className="p-4 text-sm text-slate-700">{prop.clientName}</td>
                        <td className="p-4 text-sm text-slate-500">
                           <div className="flex items-center gap-2">
                              <Calendar size={14} className="text-slate-400"/>
                              {new Date(prop.issueDate).toLocaleDateString('pt-BR')}
                           </div>
                        </td>
                        <td className="p-4 font-bold text-slate-700">R$ {prop.totalValue.toLocaleString('pt-BR')}</td>
                        <td className="p-4 text-center">
                           <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wide ${
                              prop.status === 'accepted' ? 'bg-green-50 text-green-600' :
                              prop.status === 'sent' ? 'bg-blue-50 text-blue-600' :
                              prop.status === 'rejected' ? 'bg-red-50 text-red-600' :
                              'bg-slate-100 text-slate-500'
                           }`}>
                              {prop.status === 'accepted' ? 'Aceito' : prop.status === 'sent' ? 'Enviado' : prop.status === 'rejected' ? 'Rejeitado' : 'Rascunho'}
                           </span>
                        </td>
                        <td className="p-4 text-right">
                           <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                              <button onClick={() => openEdit(prop)} className="p-2 text-slate-400 hover:text-primary-500 hover:bg-primary-50 rounded-lg transition-colors" title="Editar / Visualizar">
                                 <Edit2 size={18} />
                              </button>
                              <button onClick={() => handleDelete(prop.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors" title="Excluir">
                                 <Trash2 size={18} />
                              </button>
                           </div>
                        </td>
                     </tr>
                  ))}
               </tbody>
            </table>
            {proposals.length === 0 && (
                <div className="p-10 text-center text-slate-400">
                    <FileText size={32} className="mx-auto mb-2 opacity-20"/>
                    <p>Nenhuma proposta registrada.</p>
                </div>
            )}
         </div>
      </div>
    </div>
  );
};