import React, { useState, useEffect, useRef } from 'react';
import { Camera, Send, FileText, User, LogOut, CheckCircle, XCircle, Download, Search, Loader2, Eye, ScanLine, DollarSign, Calendar, Plus, Trash2, Save, Edit3 } from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, addDoc, query, orderBy, onSnapshot, updateDoc, doc, deleteDoc } from 'firebase/firestore';

// --- Configuração do Firebase ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- Carregar Tesseract.js ---
const loadTesseract = () => {
  return new Promise((resolve, reject) => {
    if (window.Tesseract) {
      resolve(window.Tesseract);
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';
    script.onload = () => resolve(window.Tesseract);
    script.onerror = reject;
    document.head.appendChild(script);
  });
};

// --- Componente Principal ---
export default function MaterialManagerApp() {
  const [user, setUser] = useState(null);
  const [userName, setUserName] = useState('');
  const [userRole, setUserRole] = useState(null);
  const [loadingAuth, setLoadingAuth] = useState(true);

  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
         // Token customizado
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    loadTesseract().catch(err => console.log("Erro OCR:", err));

    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      const savedName = localStorage.getItem('tech_app_name');
      const savedRole = localStorage.getItem('tech_app_role');
      if (savedName) setUserName(savedName);
      if (savedRole) setUserRole(savedRole);
      setLoadingAuth(false);
    });
    return () => unsubscribe();
  }, []);

  const handleLogin = (name, role) => {
    setUserName(name);
    setUserRole(role);
    localStorage.setItem('tech_app_name', name);
    localStorage.setItem('tech_app_role', role);
  };

  const handleLogout = () => {
    setUserName('');
    setUserRole(null);
    localStorage.removeItem('tech_app_name');
    localStorage.removeItem('tech_app_role');
  };

  if (loadingAuth) return <div className="flex h-screen items-center justify-center"><Loader2 className="animate-spin text-blue-600" size={48} /></div>;

  if (!userName || !userRole) {
    return <LoginPage onLogin={handleLogin} />;
  }

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-800">
      <header className="bg-slate-900 text-white p-4 shadow-md sticky top-0 z-30">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="bg-blue-500 p-2 rounded-lg">
              <FileText size={20} className="text-white" />
            </div>
            <div>
              <h1 className="font-bold text-lg leading-tight hidden sm:block">Gestão de Materiais</h1>
              <h1 className="font-bold text-lg leading-tight sm:hidden">Gestão</h1>
              <p className="text-xs text-slate-300 opacity-80">
                {userRole === 'admin' ? 'Controle de Estoque/Custos' : 'App do Técnico'}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="text-right hidden sm:block">
              <p className="text-sm font-medium text-white">{userName}</p>
              <p className="text-xs text-slate-400 capitalize">{userRole === 'tech' ? 'Técnico' : 'Administrador'}</p>
            </div>
            <button onClick={handleLogout} className="p-2 hover:bg-slate-700 rounded-full transition-colors" title="Sair">
              <LogOut size={18} />
            </button>
          </div>
        </div>
      </header>

      <main className="p-4 max-w-7xl mx-auto">
        {userRole === 'tech' ? (
          <TechnicianView userName={userName} user={user} />
        ) : (
          <AdminDashboard user={user} />
        )}
      </main>
    </div>
  );
}

// --- Tela de Login ---
function LoginPage({ onLogin }) {
  const [name, setName] = useState('');
  const [role, setRole] = useState('tech');

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
      <div className="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md">
        <div className="text-center mb-8">
          <div className="bg-slate-800 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white shadow-lg">
            <FileText size={32} />
          </div>
          <h2 className="text-2xl font-bold text-gray-800">Acesso ao Sistema</h2>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); if(name.trim()) onLogin(name, role); }} className="space-y-5">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Seu Nome</label>
            <input type="text" required className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 outline-none" placeholder="Ex: Bruno Silva" value={name} onChange={(e) => setName(e.target.value)} />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <button type="button" onClick={() => setRole('tech')} className={`py-3 px-4 rounded-lg border font-medium text-sm transition-all ${role === 'tech' ? 'bg-blue-50 border-blue-500 text-blue-800 ring-1 ring-blue-500' : 'bg-white border-gray-200 text-gray-500'}`}>Técnico</button>
            <button type="button" onClick={() => setRole('admin')} className={`py-3 px-4 rounded-lg border font-medium text-sm transition-all ${role === 'admin' ? 'bg-blue-50 border-blue-500 text-blue-800 ring-1 ring-blue-500' : 'bg-white border-gray-200 text-gray-500'}`}>ADM / Supervisor</button>
          </div>
          <button type="submit" className="w-full bg-slate-800 hover:bg-slate-900 text-white font-bold py-3 rounded-lg shadow-md transition-colors">Entrar</button>
        </form>
      </div>
    </div>
  );
}

// --- Visão do Técnico (Upload Simples) ---
function TechnicianView({ userName, user }) {
  const [osNumber, setOsNumber] = useState('');
  const [unit, setUnit] = useState('');
  const [amount, setAmount] = useState('');
  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
  const [image, setImage] = useState(null);
  const [preview, setPreview] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [feedback, setFeedback] = useState(null);
  const fileInputRef = useRef(null);

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const MAX_WIDTH = 1000;
        const scaleSize = MAX_WIDTH / img.width;
        canvas.width = MAX_WIDTH;
        canvas.height = img.height * scaleSize;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
        setImage(compressedDataUrl);
        setPreview(compressedDataUrl);
      };
    };
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user) return;
    if (!image) { setFeedback({ type: 'error', msg: 'Foto da nota é obrigatória.' }); return; }

    setIsSubmitting(true);
    try {
      // Cria a nota com status 'pendente' e array de itens vazio (para o ADM preencher)
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'receipts'), {
        osNumber,
        unit,
        totalAmount: parseFloat(amount.replace(',', '.')) || 0, // Valor total estimado pelo técnico
        date,
        technicianName: userName,
        technicianId: user.uid,
        imageUrl: image,
        timestamp: new Date().toISOString(),
        status: 'pendente',
        items: [] // Array vazio para ser populado pela ADM
      });

      setFeedback({ type: 'success', msg: 'Nota enviada com sucesso!' });
      setOsNumber(''); setUnit(''); setAmount(''); setImage(null); setPreview(null);
      if (fileInputRef.current) fileInputRef.current.value = '';
      setTimeout(() => setFeedback(null), 3000);
    } catch (error) {
      console.error(error);
      setFeedback({ type: 'error', msg: 'Erro ao enviar.' });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="max-w-lg mx-auto">
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 className="text-lg font-bold mb-4 text-gray-800 flex items-center gap-2">
          <Send size={20} className="text-blue-600" />
          Lançar Nota de Material
        </h3>
        {feedback && (
          <div className={`p-3 rounded-lg mb-4 text-sm font-medium flex items-center gap-2 ${feedback.type === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>
            {feedback.type === 'success' ? <CheckCircle size={18}/> : <XCircle size={18}/>}
            {feedback.msg}
          </div>
        )}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Foto da Nota</label>
            <div 
              className={`border-2 border-dashed rounded-xl p-4 text-center cursor-pointer transition-colors relative ${preview ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-blue-400 hover:bg-blue-50'}`}
              onClick={() => fileInputRef.current.click()}
            >
              {preview ? (
                 <div className="relative"><img src={preview} alt="Preview" className="max-h-48 mx-auto rounded-lg shadow-md" /><p className="text-xs text-blue-600 mt-2 font-bold">Toque para trocar</p></div>
              ) : (
                <div className="flex flex-col items-center text-gray-500 py-4">
                  <Camera size={32} className="mb-2 text-gray-400" />
                  <p className="text-sm font-medium">Tirar foto da nota</p>
                </div>
              )}
              <input type="file" ref={fileInputRef} accept="image/*" className="hidden" onChange={handleImageChange} />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Valor Total (R$)</label>
                <input type="number" step="0.01" placeholder="0.00" className="w-full p-2 border border-gray-300 rounded-lg outline-none focus:border-blue-500" value={amount} onChange={(e) => setAmount(e.target.value)} />
            </div>
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Data da Compra</label>
                <input type="date" className="w-full p-2 border border-gray-300 rounded-lg outline-none focus:border-blue-500" value={date} onChange={(e) => setDate(e.target.value)} />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">O.S.</label>
                <input type="text" required placeholder="12345" className="w-full p-2 border border-gray-300 rounded-lg outline-none focus:border-blue-500" value={osNumber} onChange={(e) => setOsNumber(e.target.value)} />
            </div>
            <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Unidade</label>
                <input type="text" required placeholder="Ex: Hosp. Sul" className="w-full p-2 border border-gray-300 rounded-lg outline-none focus:border-blue-500" value={unit} onChange={(e) => setUnit(e.target.value)} />
            </div>
          </div>
          <button type="submit" disabled={isSubmitting} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3.5 rounded-lg shadow-md flex items-center justify-center gap-2 disabled:opacity-50 mt-2">
            {isSubmitting ? <Loader2 className="animate-spin" size={20} /> : 'Enviar Nota'}
          </button>
        </form>
      </div>
    </div>
  );
}

// --- Modal de Extração de Itens (ADM) ---
function ItemExtractionModal({ receipt, onClose, onSave }) {
  const [items, setItems] = useState(receipt.items || []);
  const [isProcessing, setIsProcessing] = useState(false);
  const [newItem, setNewItem] = useState({ name: '', qty: 1, price: '' });
  const [totalCheck, setTotalCheck] = useState(0);

  // Calcula o total ao vivo
  useEffect(() => {
    const total = items.reduce((acc, item) => acc + (item.qty * item.price), 0);
    setTotalCheck(total);
  }, [items]);

  const runOCR = async () => {
    setIsProcessing(true);
    try {
      const Tesseract = await loadTesseract();
      const result = await Tesseract.recognize(receipt.imageUrl, 'por', {
        logger: m => {} // logs desativados para limpar console
      });
      
      const lines = result.data.text.split('\n');
      const suggestedItems = [];
      
      // Lógica simples para tentar achar linhas com preço
      // Procura linhas que terminam com padrao monetario ex: 10,00 ou 10.00
      const priceRegex = /(\d+)[.,](\d{2})\s*$/;
      
      lines.forEach(line => {
        const cleanLine = line.trim();
        const match = cleanLine.match(priceRegex);
        
        if (match && cleanLine.length > 5) {
            // Se achou preço, assume que o resto é o nome
            const priceStr = match[0].replace(',', '.');
            const price = parseFloat(priceStr);
            const name = cleanLine.replace(match[0], '').trim();
            
            // Tenta achar quantidade no inicio (ex: 2x Coca Cola)
            let qty = 1;
            const qtyMatch = name.match(/^(\d+)[xX\s]/);
            let cleanName = name;
            
            if (qtyMatch) {
                qty = parseInt(qtyMatch[1]);
                cleanName = name.substring(qtyMatch[0].length).trim();
            }

            // Filtra ruídos muito curtos
            if (cleanName.length > 2) {
                suggestedItems.push({
                    id: Date.now() + Math.random(),
                    name: cleanName,
                    qty: qty,
                    price: price
                });
            }
        }
      });

      if (suggestedItems.length > 0) {
        // Adiciona aos itens existentes
        setItems([...items, ...suggestedItems]);
      } else {
        alert("O OCR leu o texto, mas não identificou o padrão de itens automaticamente. O texto bruto pode estar bagunçado. Por favor, insira manualmente consultando a imagem.");
      }

    } catch (err) {
      console.error(err);
      alert("Erro ao processar imagem.");
    } finally {
      setIsProcessing(false);
    }
  };

  const addItem = () => {
    if (!newItem.name || !newItem.price) return;
    setItems([...items, { ...newItem, id: Date.now(), price: parseFloat(newItem.price) }]);
    setNewItem({ name: '', qty: 1, price: '' });
  };

  const removeItem = (id) => {
    setItems(items.filter(i => i.id !== id));
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-2 sm:p-6">
      <div className="bg-white w-full max-w-6xl h-[90vh] rounded-xl flex flex-col sm:flex-row overflow-hidden shadow-2xl">
        
        {/* Lado Esquerdo: Imagem */}
        <div className="w-full sm:w-1/2 bg-gray-900 flex flex-col relative">
            <div className="absolute top-4 left-4 z-10 bg-black/50 text-white px-3 py-1 rounded-full text-xs">
                Referência Visual
            </div>
            <div className="flex-1 overflow-auto p-4 flex items-center justify-center">
                <img src={receipt.imageUrl} className="max-w-full h-auto shadow-lg" alt="Cupom" />
            </div>
            <div className="p-4 bg-gray-800 flex justify-between items-center">
                <button 
                    onClick={runOCR} 
                    disabled={isProcessing}
                    className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
                >
                    {isProcessing ? <Loader2 className="animate-spin" size={18}/> : <ScanLine size={18}/>}
                    {isProcessing ? 'Lendo Cupom...' : 'Extrair Itens (IA)'}
                </button>
                <div className="text-gray-400 text-xs text-right">
                   Dica: A IA sugere, <br/>mas você valida.
                </div>
            </div>
        </div>

        {/* Lado Direito: Tabela de Edição */}
        <div className="w-full sm:w-1/2 flex flex-col bg-gray-50 h-full">
            <div className="p-4 bg-white border-b border-gray-200 flex justify-between items-center">
                <h3 className="font-bold text-gray-800">Detalhamento de Materiais</h3>
                <button onClick={onClose} className="text-gray-500 hover:text-gray-800"><XCircle size={24}/></button>
            </div>

            <div className="flex-1 overflow-auto p-4">
                {/* Tabela de Itens */}
                <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <table className="w-full text-sm text-left">
                        <thead className="bg-gray-100 text-gray-600 font-semibold">
                            <tr>
                                <th className="p-3">Item / Material</th>
                                <th className="p-3 w-16 text-center">Qtd</th>
                                <th className="p-3 w-24 text-right">R$ Unit.</th>
                                <th className="p-3 w-24 text-right">Total</th>
                                <th className="p-3 w-10"></th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100">
                            {items.length === 0 ? (
                                <tr>
                                    <td colSpan="5" className="p-8 text-center text-gray-400">
                                        Nenhum item listado.<br/>Use o botão "Extrair Itens" ou adicione manualmente.
                                    </td>
                                </tr>
                            ) : items.map(item => (
                                <tr key={item.id} className="group hover:bg-blue-50">
                                    <td className="p-3">
                                        <input 
                                            type="text" 
                                            value={item.name} 
                                            onChange={(e) => setItems(items.map(i => i.id === item.id ? {...i, name: e.target.value} : i))}
                                            className="w-full bg-transparent border-none outline-none focus:ring-0 font-medium"
                                        />
                                    </td>
                                    <td className="p-3 text-center">
                                         <input 
                                            type="number" 
                                            value={item.qty} 
                                            onChange={(e) => setItems(items.map(i => i.id === item.id ? {...i, qty: parseFloat(e.target.value)} : i))}
                                            className="w-full text-center bg-transparent outline-none"
                                        />
                                    </td>
                                    <td className="p-3 text-right">
                                        <input 
                                            type="number"
                                            step="0.01" 
                                            value={item.price} 
                                            onChange={(e) => setItems(items.map(i => i.id === item.id ? {...i, price: parseFloat(e.target.value)} : i))}
                                            className="w-full text-right bg-transparent outline-none"
                                        />
                                    </td>
                                    <td className="p-3 text-right font-bold text-gray-700">
                                        {(item.qty * item.price).toFixed(2)}
                                    </td>
                                    <td className="p-3 text-center">
                                        <button onClick={() => removeItem(item.id)} className="text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100">
                                            <Trash2 size={16}/>
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {/* Adicionar Manual */}
                <div className="mt-4 flex gap-2 items-end">
                    <div className="flex-1">
                        <label className="text-xs text-gray-500">Nome do Material</label>
                        <input type="text" value={newItem.name} onChange={e => setNewItem({...newItem, name: e.target.value})} className="w-full p-2 border rounded" placeholder="Ex: Cabo de Rede" />
                    </div>
                    <div className="w-16">
                         <label className="text-xs text-gray-500">Qtd</label>
                         <input type="number" value={newItem.qty} onChange={e => setNewItem({...newItem, qty: e.target.value})} className="w-full p-2 border rounded text-center" />
                    </div>
                    <div className="w-24">
                         <label className="text-xs text-gray-500">R$ Unit</label>
                         <input type="number" step="0.01" value={newItem.price} onChange={e => setNewItem({...newItem, price: e.target.value})} className="w-full p-2 border rounded text-right" />
                    </div>
                    <button onClick={addItem} className="bg-gray-800 text-white p-2 rounded hover:bg-black mb-[1px]">
                        <Plus size={20}/>
                    </button>
                </div>
            </div>

            {/* Rodapé com Totais e Salvar */}
            <div className="p-4 bg-white border-t border-gray-200 shadow-up flex justify-between items-center">
                <div>
                    <p className="text-xs text-gray-500">Total Calculado</p>
                    <p className="text-xl font-bold text-blue-600">R$ {totalCheck.toLocaleString('pt-BR', {minimumFractionDigits: 2})}</p>
                    {receipt.totalAmount > 0 && Math.abs(totalCheck - receipt.totalAmount) > 1 && (
                         <p className="text-xs text-orange-500 flex items-center gap-1">
                            ⚠ Difere do total da nota (R$ {receipt.totalAmount})
                         </p>
                    )}
                </div>
                <button 
                    onClick={() => onSave(receipt.id, items)}
                    className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold shadow-lg flex items-center gap-2"
                >
                    <Save size={18} /> Salvar Materiais
                </button>
            </div>
        </div>
      </div>
    </div>
  );
}

// --- Visão do Administrador ---
function AdminDashboard({ user }) {
  const [receipts, setReceipts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('');
  const [editingReceipt, setEditingReceipt] = useState(null); // Nota sendo editada no modal

  useEffect(() => {
    if (!user) return;
    const q = query(collection(db, 'artifacts', appId, 'public', 'data', 'receipts'), orderBy('timestamp', 'desc'));
    const unsubscribe = onSnapshot(q, (snapshot) => {
      setReceipts(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })));
      setLoading(false);
    });
    return () => unsubscribe();
  }, [user]);

  const saveItems = async (receiptId, items) => {
    try {
        // Recalcula o total baseado nos itens
        const newTotal = items.reduce((acc, i) => acc + (i.qty * i.price), 0);
        
        await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'receipts', receiptId), { 
            items: items,
            totalAmount: newTotal,
            status: 'processado' // Marca automaticamente como processado
        });
        setEditingReceipt(null);
    } catch (e) {
        console.error("Erro ao salvar itens", e);
        alert("Erro ao salvar.");
    }
  };

  const handleDelete = async (id) => {
      if(confirm("Excluir permanentemente?")) {
          await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'receipts', id));
      }
  };

  // --- Exportação Excel (Granular: Linha por Material) ---
  const exportToCSV = () => {
    const BOM = "\uFEFF";
    const headers = ['Data Nota', 'Técnico', 'OS', 'Unidade', 'Material/Item', 'Quantidade', 'Valor Unit (R$)', 'Valor Total (R$)'];
    
    let csvRows = [];

    receipts.forEach(r => {
        const noteDate = r.date ? new Date(r.date).toLocaleDateString('pt-BR') : '-';
        
        if (r.items && r.items.length > 0) {
            // Se tem itens detalhados, cria uma linha para cada item
            r.items.forEach(item => {
                 csvRows.push([
                    noteDate,
                    `"${r.technicianName}"`,
                    `"${r.osNumber}"`,
                    `"${r.unit}"`,
                    `"${item.name}"`, // O material em si
                    item.qty.toString().replace('.', ','),
                    item.price.toString().replace('.', ','),
                    (item.qty * item.price).toString().replace('.', ',')
                ].join(';'));
            });
        } else {
            // Se não tem itens detalhados (nota fechada), cria uma linha genérica
            csvRows.push([
                noteDate,
                `"${r.technicianName}"`,
                `"${r.osNumber}"`,
                `"${r.unit}"`,
                `"NOTA FECHADA (SEM DETALHE)"`,
                "1",
                r.totalAmount ? r.totalAmount.toString().replace('.', ',') : '0,00',
                r.totalAmount ? r.totalAmount.toString().replace('.', ',') : '0,00',
            ].join(';'));
        }
    });

    const csvContent = BOM + [headers.join(';'), ...csvRows].join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.setAttribute('download', `materiais_detalhados_${new Date().toISOString().slice(0,10)}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const filteredReceipts = receipts.filter(r => 
    r.technicianName.toLowerCase().includes(filter.toLowerCase()) ||
    r.osNumber.includes(filter) ||
    r.unit.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div className="space-y-6">
      {/* Barra de Ferramentas */}
      <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200 flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="relative w-full md:w-96">
          <Search className="absolute left-3 top-3 text-gray-400" size={18} />
          <input type="text" placeholder="Buscar por Técnico, OS..." className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" value={filter} onChange={(e) => setFilter(e.target.value)} />
        </div>
        <button onClick={exportToCSV} className="bg-green-700 hover:bg-green-800 text-white px-5 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 w-full md:w-auto justify-center">
          <Download size={18} /> Exportar Relatório de Materiais
        </button>
      </div>

      {/* Lista de Notas */}
      {loading ? (
        <div className="flex justify-center py-12"><Loader2 className="animate-spin text-gray-400" size={32}/></div>
      ) : (
        <div className="grid gap-4">
            {filteredReceipts.map((receipt) => (
               <div key={receipt.id} className="bg-white rounded-xl border border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow flex flex-col md:flex-row md:items-center justify-between gap-4">
                   <div className="flex items-start gap-4">
                       <div className="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0 cursor-pointer border border-gray-200" onClick={() => setEditingReceipt(receipt)}>
                           <img src={receipt.imageUrl} alt="Nota" className="w-full h-full object-cover" />
                       </div>
                       <div>
                           <div className="flex items-center gap-2 mb-1">
                               <span className="font-bold text-gray-800">{receipt.technicianName}</span>
                               <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full border border-gray-200">OS: {receipt.osNumber}</span>
                           </div>
                           <div className="text-sm text-gray-500 mb-1">{receipt.unit} • {new Date(receipt.date).toLocaleDateString('pt-BR')}</div>
                           <div className="flex items-center gap-2">
                               <span className={`text-xs font-bold px-2 py-0.5 rounded uppercase ${receipt.status === 'processado' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>{receipt.status}</span>
                               {receipt.items && receipt.items.length > 0 && (
                                   <span className="text-xs text-blue-600 font-medium flex items-center gap-1"><CheckCircle size={12}/> {receipt.items.length} Itens detalhados</span>
                               )}
                           </div>
                       </div>
                   </div>

                   <div className="flex flex-col md:items-end gap-2">
                       <div className="text-xl font-bold text-gray-800">R$ {receipt.totalAmount?.toLocaleString('pt-BR', {minimumFractionDigits: 2})}</div>
                       <div className="flex gap-2">
                            <button 
                                onClick={() => setEditingReceipt(receipt)}
                                className="flex items-center gap-2 bg-slate-800 text-white px-4 py-2 rounded-lg text-sm hover:bg-slate-900 transition-colors"
                            >
                                <Edit3 size={16} />
                                {receipt.items && receipt.items.length > 0 ? 'Revisar Itens' : 'Processar (OCR)'}
                            </button>
                            <button onClick={() => handleDelete(receipt.id)} className="p-2 text-gray-400 hover:text-red-500 border border-gray-200 rounded-lg hover:bg-red-50 transition-colors">
                                <Trash2 size={18}/>
                            </button>
                       </div>
                   </div>
               </div>
            ))}
        </div>
      )}

      {/* Modal de Edição */}
      {editingReceipt && (
        <ItemExtractionModal 
            receipt={editingReceipt} 
            onClose={() => setEditingReceipt(null)} 
            onSave={saveItems}
        />
      )}
    </div>
  );
}