import React, { useState } from 'react';
import { Plus, Trash2, Printer, Upload, RefreshCcw, FileText, User, Briefcase, Calendar, DollarSign, Settings } from 'lucide-react';

const InvoiceGenerator = () => {
  // --- State Management ---
  const [invoiceNumber, setInvoiceNumber] = useState('INV-001');
  const [date, setDate] = useState(new Date().toISOString().split('T')[0]);
  const [dueDate, setDueDate] = useState('');
  
  const [senderDetails, setSenderDetails] = useState({
    name: 'Your Business Name',
    address: '123 Business Rd, Suite 100',
    cityState: 'New York, NY 10001',
    email: 'contact@yourbusiness.com'
  });

  const [recipientDetails, setRecipientDetails] = useState({
    name: 'Client Company Name',
    address: '456 Client Avenue',
    cityState: 'San Francisco, CA 94105',
    email: 'billing@client.com'
  });

  const [items, setItems] = useState([
    { id: 1, description: 'Web Development Services', quantity: 1, price: 1500.00 },
    { id: 2, description: 'Hosting & Maintenance (Annual)', quantity: 1, price: 300.00 },
  ]);

  const [taxRate, setTaxRate] = useState(10);
  const [notes, setNotes] = useState('Thank you for your business. Payment is due within 30 days.');
  const [currencySymbol, setCurrencySymbol] = useState('$');
  const [logo, setLogo] = useState(null);

  // --- Actions ---
  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setLogo(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const addItem = () => {
    setItems([...items, { id: Date.now(), description: '', quantity: 1, price: 0 }]);
  };

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

  const updateItem = (id, field, value) => {
    setItems(items.map(item => 
      item.id === id ? { ...item, [field]: value } : item
    ));
  };

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

  // --- Calculations ---
  const subtotal = items.reduce((sum, item) => sum + (item.quantity * item.price), 0);
  const taxAmount = subtotal * (taxRate / 100);
  const total = subtotal + taxAmount;

  // --- Formatters ---
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(amount);
  };

  return (
    <div className="min-h-screen bg-slate-100 font-sans text-slate-800 print:bg-white print:p-0">
      
      {/* Top Navigation Bar - Hidden on print */}
      <div className="bg-white border-b border-slate-200 sticky top-0 z-50 print:hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <div className="bg-indigo-600 text-white p-1.5 rounded-lg">
              <FileText className="w-5 h-5" />
            </div>
            <h1 className="text-xl font-bold text-slate-800">Invoice Generator</h1>
          </div>
          <div className="flex gap-3">
            <button 
              onClick={() => window.location.reload()}
              className="flex items-center px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors"
            >
              <RefreshCcw className="w-4 h-4 mr-2" />
              Reset
            </button>
            <button 
              onClick={handlePrint}
              className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm font-medium text-sm"
            >
              <Printer className="w-4 h-4 mr-2" />
              Print / Save PDF
            </button>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col lg:flex-row gap-8 items-start">
          
          {/* LEFT COLUMN: FORM EDITOR */}
          <div className="w-full lg:w-5/12 space-y-6 print:hidden">
            
            {/* Section: Company Info */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center gap-2">
                <Briefcase className="w-4 h-4 text-indigo-500" />
                <h2 className="font-semibold text-slate-700">From (Your Business)</h2>
              </div>
              <div className="p-6 space-y-4">
                <div>
                  <label className="block text-xs font-medium text-slate-500 uppercase mb-1">Business Logo</label>
                  <label className="flex items-center justify-center w-full h-24 border-2 border-dashed border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50 hover:border-indigo-300 transition-all">
                    {logo ? (
                      <div className="flex items-center gap-4">
                        <img src={logo} alt="Logo" className="h-16 object-contain" />
                        <span className="text-xs text-indigo-600 font-medium">Click to change</span>
                      </div>
                    ) : (
                      <div className="flex flex-col items-center">
                        <Upload className="w-5 h-5 text-slate-400 mb-1" />
                        <span className="text-xs text-slate-500">Upload Logo</span>
                      </div>
                    )}
                    <input type="file" className="hidden" accept="image/*" onChange={handleFileUpload} />
                  </label>
                </div>
                <div className="grid grid-cols-1 gap-4">
                  <input type="text" placeholder="Business Name" value={senderDetails.name} onChange={e => setSenderDetails({...senderDetails, name: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                  <input type="text" placeholder="Address" value={senderDetails.address} onChange={e => setSenderDetails({...senderDetails, address: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                  <div className="grid grid-cols-2 gap-4">
                    <input type="text" placeholder="City, State Zip" value={senderDetails.cityState} onChange={e => setSenderDetails({...senderDetails, cityState: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                    <input type="email" placeholder="Email" value={senderDetails.email} onChange={e => setSenderDetails({...senderDetails, email: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                  </div>
                </div>
              </div>
            </div>

            {/* Section: Client Info */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center gap-2">
                <User className="w-4 h-4 text-indigo-500" />
                <h2 className="font-semibold text-slate-700">To (Client)</h2>
              </div>
              <div className="p-6 space-y-4">
                <input type="text" placeholder="Client Name" value={recipientDetails.name} onChange={e => setRecipientDetails({...recipientDetails, name: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                <input type="text" placeholder="Address" value={recipientDetails.address} onChange={e => setRecipientDetails({...recipientDetails, address: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                <div className="grid grid-cols-2 gap-4">
                  <input type="text" placeholder="City, State Zip" value={recipientDetails.cityState} onChange={e => setRecipientDetails({...recipientDetails, cityState: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                  <input type="email" placeholder="Client Email" value={recipientDetails.email} onChange={e => setRecipientDetails({...recipientDetails, email: e.target.value})} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                </div>
              </div>
            </div>

            {/* Section: Invoice Details */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center gap-2">
                <Calendar className="w-4 h-4 text-indigo-500" />
                <h2 className="font-semibold text-slate-700">Invoice Details</h2>
              </div>
              <div className="p-6 grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Invoice #</label>
                  <input type="text" value={invoiceNumber} onChange={e => setInvoiceNumber(e.target.value)} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                </div>
                 <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Currency Symbol</label>
                  <input type="text" value={currencySymbol} onChange={e => setCurrencySymbol(e.target.value)} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Date</label>
                  <input type="date" value={date} onChange={e => setDate(e.target.value)} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                </div>
                <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Due Date</label>
                  <input type="date" value={dueDate} onChange={e => setDueDate(e.target.value)} className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" />
                </div>
              </div>
            </div>

            {/* Section: Line Items */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
              <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <DollarSign className="w-4 h-4 text-indigo-500" />
                  <h2 className="font-semibold text-slate-700">Line Items</h2>
                </div>
                <button onClick={addItem} className="text-xs flex items-center bg-indigo-50 text-indigo-600 px-2 py-1 rounded hover:bg-indigo-100 transition-colors">
                  <Plus className="w-3 h-3 mr-1" /> Add Item
                </button>
              </div>
              <div className="p-6 space-y-4">
                {items.map((item, index) => (
                  <div key={item.id} className="group relative bg-slate-50 p-3 rounded-lg border border-slate-200">
                    <div className="flex gap-3 mb-2">
                       <input 
                        type="text" 
                        placeholder="Description" 
                        value={item.description} 
                        onChange={e => updateItem(item.id, 'description', e.target.value)}
                        className="flex-grow px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                      />
                      <button onClick={() => removeItem(item.id)} className="text-slate-400 hover:text-red-500 transition-colors p-2">
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                    <div className="flex gap-3">
                      <div className="w-1/3">
                        <label className="block text-xs text-slate-500 mb-1">Qty</label>
                         <input 
                          type="number" 
                          min="0"
                          value={item.quantity} 
                          onChange={e => updateItem(item.id, 'quantity', parseFloat(e.target.value))}
                          className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                        />
                      </div>
                      <div className="w-1/3">
                        <label className="block text-xs text-slate-500 mb-1">Price</label>
                         <input 
                          type="number" 
                          min="0"
                          step="0.01"
                          value={item.price} 
                          onChange={e => updateItem(item.id, 'price', parseFloat(e.target.value))}
                          className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
                        />
                      </div>
                      <div className="w-1/3">
                        <label className="block text-xs text-slate-500 mb-1">Total</label>
                        <div className="px-3 py-2 bg-white border border-slate-200 rounded-md text-sm text-slate-600 text-right font-mono">
                          {formatCurrency(item.quantity * item.price)}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
                {items.length === 0 && (
                  <div className="text-center py-4 text-sm text-slate-400 italic">No items added yet.</div>
                )}
              </div>
            </div>

            {/* Section: Settings */}
            <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
               <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 flex items-center gap-2">
                <Settings className="w-4 h-4 text-indigo-500" />
                <h2 className="font-semibold text-slate-700">Settings & Notes</h2>
              </div>
              <div className="p-6 space-y-4">
                 <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Tax Rate (%)</label>
                  <input 
                    type="number" 
                    value={taxRate} 
                    onChange={e => setTaxRate(parseFloat(e.target.value))} 
                    className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" 
                  />
                </div>
                 <div>
                  <label className="block text-xs font-medium text-slate-500 mb-1">Notes / Payment Terms</label>
                  <textarea 
                    rows={4}
                    value={notes} 
                    onChange={e => setNotes(e.target.value)} 
                    className="w-full px-3 py-2 border border-slate-300 rounded-md text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none" 
                  />
                </div>
              </div>
            </div>

          </div>

          {/* RIGHT COLUMN: PREVIEW (STICKY) */}
          <div className="w-full lg:w-7/12 print:w-full">
            <div className="lg:sticky lg:top-24">
              
              {/* Preview Header */}
              <div className="mb-4 flex justify-between items-center print:hidden">
                 <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">Live Preview</h2>
                 <span className="text-xs text-slate-400 bg-white px-2 py-1 rounded border border-slate-200 shadow-sm">A4 / Letter Size</span>
              </div>

              {/* The "Paper" Invoice */}
              <div className="bg-white shadow-2xl rounded-xl overflow-hidden min-h-[800px] print:shadow-none print:rounded-none print:min-h-0 print:w-full">
                
                {/* Top Accent Bar */}
                <div className="h-2 bg-indigo-600 w-full print:bg-indigo-600"></div>

                <div className="p-8 sm:p-12">
                  
                  {/* Header Section */}
                  <div className="flex flex-col sm:flex-row justify-between gap-8 mb-12">
                    
                    {/* Logo Area */}
                    <div className="w-full sm:w-1/2">
                      <div className="mb-4 h-20 flex items-start">
                        {logo ? (
                          <img src={logo} alt="Business Logo" className="h-20 object-contain" />
                        ) : (
                          <div className="w-20 h-20 bg-slate-100 rounded flex items-center justify-center text-slate-300">
                             <span className="text-xs">No Logo</span>
                          </div>
                        )}
                      </div>
                      
                      {/* Sender Details */}
                      <div className="text-slate-600">
                        <h3 className="text-xl font-bold text-slate-900 mb-1">{senderDetails.name || 'Your Business Name'}</h3>
                        <p className="text-sm leading-relaxed">
                          {senderDetails.address}<br />
                          {senderDetails.cityState}<br />
                          {senderDetails.email}
                        </p>
                      </div>
                    </div>

                    {/* Invoice Meta Data */}
                    <div className="w-full sm:w-1/3 text-left sm:text-right">
                      <h2 className="text-4xl font-light text-slate-200 mb-4 uppercase tracking-widest">Invoice</h2>
                      <div className="flex flex-col gap-2">
                        <div className="flex justify-between sm:justify-end gap-8">
                          <span className="text-slate-500 text-sm font-medium">Invoice #</span>
                          <span className="font-bold text-slate-800">{invoiceNumber}</span>
                        </div>
                        <div className="flex justify-between sm:justify-end gap-8">
                          <span className="text-slate-500 text-sm font-medium">Date</span>
                          <span className="text-slate-800">{date}</span>
                        </div>
                        {dueDate && (
                          <div className="flex justify-between sm:justify-end gap-8">
                            <span className="text-slate-500 text-sm font-medium">Due Date</span>
                            <span className="text-slate-800">{dueDate}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Recipient Section */}
                  <div className="mb-12">
                    <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Bill To</h3>
                    <div className="text-slate-600">
                      <p className="text-xl font-bold text-slate-900 mb-1">{recipientDetails.name || 'Client Name'}</p>
                      <p className="text-sm leading-relaxed">
                        {recipientDetails.address}<br />
                        {recipientDetails.cityState}<br />
                        {recipientDetails.email}
                      </p>
                    </div>
                  </div>

                  {/* Items Table */}
                  <div className="mb-8">
                    <div className="grid grid-cols-12 gap-4 border-b-2 border-slate-100 pb-3 mb-4">
                      <div className="col-span-6 text-xs font-semibold text-slate-400 uppercase tracking-wider">Description</div>
                      <div className="col-span-2 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Qty</div>
                      <div className="col-span-2 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Price</div>
                      <div className="col-span-2 text-right text-xs font-semibold text-slate-400 uppercase tracking-wider">Total</div>
                    </div>

                    <div className="space-y-4">
                      {items.map((item) => (
                        <div key={item.id} className="grid grid-cols-12 gap-4 text-sm text-slate-700">
                          <div className="col-span-6 font-medium">{item.description}</div>
                          <div className="col-span-2 text-right text-slate-500">{item.quantity}</div>
                          <div className="col-span-2 text-right text-slate-500">{currencySymbol}{formatCurrency(item.price)}</div>
                          <div className="col-span-2 text-right font-semibold text-slate-900">{currencySymbol}{formatCurrency(item.quantity * item.price)}</div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Totals Section */}
                  <div className="flex flex-col sm:flex-row justify-between pt-6 border-t border-slate-100">
                    <div className="w-full sm:w-1/2 mb-6 sm:mb-0">
                       <h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Notes</h3>
                       <p className="text-sm text-slate-500 whitespace-pre-wrap leading-relaxed">{notes}</p>
                    </div>
                    
                    <div className="w-full sm:w-1/3 space-y-3">
                      <div className="flex justify-between text-slate-600">
                        <span>Subtotal</span>
                        <span>{currencySymbol}{formatCurrency(subtotal)}</span>
                      </div>
                      <div className="flex justify-between items-center text-slate-600">
                         <span>Tax ({taxRate}%)</span>
                        <span>{currencySymbol}{formatCurrency(taxAmount)}</span>
                      </div>
                      <div className="flex justify-between text-xl font-bold text-slate-900 pt-3 border-t border-slate-200">
                        <span>Total</span>
                        <span>{currencySymbol}{formatCurrency(total)}</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      
      {/* Print Styles Injection */}
      <style>{`
        @media print {
          body {
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
          }
          @page {
            margin: 0;
            size: auto;
          }
        }
      `}</style>
    </div>
  );
};

export default InvoiceGenerator;