import React, { useState, useEffect } from 'react';
import { Printer, Plus, Trash2, FileText, Briefcase, Hash, Calendar, Download, Image as ImageIcon } from 'lucide-react';

export default function App() {
  // State untuk jenis dokumen (quotation, invoice, receipt)
  const [docType, setDocType] = useState('quotation');

// State untuk status library html2canvas
  const [isLibraryLoaded, setIsLibraryLoaded] = useState(false);

// Load html2canvas script
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
    script.async = true;
    script.onload = () => setIsLibraryLoaded(true);
    document.body.appendChild(script);

return () => {
      document.body.removeChild(script);
    };
  }, []);

// State untuk maklumat borang
  const [formData, setFormData] = useState({
    companyName: 'Syarikat Maju Jaya Sdn Bhd',
    companyAddress: 'No. 123, Jalan Bisnes 1,\nTaman Usahawan,\n40000 Shah Alam, Selangor.',
    clientName: 'Encik Ali Bin Abu',
    clientAddress: 'Lot 45, Kampung Baru,\n50000 Kuala Lumpur.',
    docNumber: 'QT-2023-001',
    date: new Date().toISOString().split('T')[0],
  });

// State untuk senarai item
  const [items, setItems] = useState([
    { id: 1, description: 'Perkhidmatan Reka Bentuk Web', quantity: 1, price: 1500 },
    { id: 2, description: 'Domain & Hosting (1 Tahun)', quantity: 1, price: 300 },
  ]);

// Fungsi mengendalikan perubahan input teks
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

// Fungsi mengendalikan perubahan item
  const handleItemChange = (id, field, value) => {
    const newItems = items.map((item) => {
      if (item.id === id) {
        return { ...item, [field]: value };
      }
      return item;
    });
    setItems(newItems);
  };

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

// Hapus item
  const deleteItem = (id) => {
    setItems(items.filter((item) => item.id !== id));
  };

// Kira jumlah total
  const calculateTotal = () => {
    return items.reduce((sum, item) => sum + (Number(item.quantity) * Number(item.price)), 0);
  };

// Format mata wang
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('ms-MY', { style: 'currency', currency: 'MYR' }).format(amount);
  };

// Dapatkan tajuk dokumen berdasarkan jenis
  const getDocTitle = () => {
    switch (docType) {
      case 'quotation': return 'SEBUTHARGA';
      case 'invoice': return 'INVOIS';
      case 'receipt': return 'RESIT';
      default: return 'DOKUMEN';
    }
  };

// Dapatkan label nombor rujukan
  const getRefLabel = () => {
    switch (docType) {
      case 'quotation': return 'No. Sebutharga';
      case 'invoice': return 'No. Invois';
      case 'receipt': return 'No. Resit';
      default: return 'No. Rujukan';
    }
  };

// Fungsi Simpan sebagai PNG
  const handleDownloadPNG = async () => {
    if (!isLibraryLoaded || typeof window.html2canvas === 'undefined') {
      alert("Sila tunggu sebentar, sistem sedang memuatkan fungsi imej...");
      return;
    }

const element = document.getElementById('document-preview');

try {
      const canvas = await window.html2canvas(element, {
        scale: 2, // Kualiti tinggi
        backgroundColor: '#ffffff',
        logging: false,
        useCORS: true
      });

const image = canvas.toDataURL("image/png");
      const link = document.createElement('a');
      link.href = image;
      link.download = `${getDocTitle()}_${formData.docNumber}.png`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (error) {
      console.error("Gagal menjana imej:", error);
      alert("Maaf, terdapat ralat semasa menjana imej.");
    }
  };

return (
    <div className="min-h-screen bg-gray-100 font-sans text-gray-800 pb-10">

{/* Navbar - Hidden on Print */}
      <nav className="bg-blue-900 text-white p-4 shadow-md print:hidden">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <FileText className="h-6 w-6" />
            <h1 className="text-xl font-bold">Penjana Dokumen Perniagaan</h1>
          </div>
          <button 
            onClick={handleDownloadPNG}
            className="flex items-center space-x-2 bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition"
          >
            <ImageIcon className="h-4 w-4" />
            <span>Simpan PNG</span>
          </button>
        </div>
      </nav>

<div className="max-w-7xl mx-auto p-4 flex flex-col lg:flex-row gap-6 mt-4">

{/* EDITOR SECTION - Hidden on Print */}
        <div className="w-full lg:w-1/3 space-y-6 print:hidden">

{/* Card: Tetapan Dokumen */}
          <div className="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
            <h2 className="text-lg font-semibold mb-4 flex items-center text-blue-900">
              <FileText className="w-4 h-4 mr-2" /> Jenis Dokumen
            </h2>
            <div className="flex space-x-2 mb-4">
              {['quotation', 'invoice', 'receipt'].map((type) => (
                <button
                  key={type}
                  onClick={() => setDocType(type)}
                  className={`flex-1 py-2 text-sm font-medium rounded-md capitalize transition ${
                    docType === type 
                      ? 'bg-blue-600 text-white shadow-md' 
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  {type === 'quotation' ? 'Sebutharga' : type === 'invoice' ? 'Invois' : 'Resit'}
                </button>
              ))}
            </div>

<div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium text-gray-500 mb-1">{getRefLabel()}</label>
                <div className="relative">
                  <Hash className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
                  <input
                    type="text"
                    name="docNumber"
                    value={formData.docNumber}
                    onChange={handleInputChange}
                    className="w-full pl-8 p-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
                  />
                </div>
              </div>
              <div>
                <label className="block text-xs font-medium text-gray-500 mb-1">Tarikh</label>
                <div className="relative">
                  <Calendar className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
                  <input
                    type="date"
                    name="date"
                    value={formData.date}
                    onChange={handleInputChange}
                    className="w-full pl-8 p-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none"
                  />
                </div>
              </div>
            </div>
          </div>

{/* Card: Maklumat Pihak */}
          <div className="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
            <h2 className="text-lg font-semibold mb-4 flex items-center text-blue-900">
              <Briefcase className="w-4 h-4 mr-2" /> Maklumat Pihak
            </h2>

<div className="space-y-4">
              {/* Syarikat */}
              <div className="p-3 bg-blue-50 rounded-lg border border-blue-100">
                <label className="block text-xs font-bold text-blue-800 uppercase mb-2">Daripada (Syarikat Anda)</label>
                <input
                  type="text"
                  name="companyName"
                  placeholder="Nama Syarikat"
                  value={formData.companyName}
                  onChange={handleInputChange}
                  className="w-full p-2 mb-2 border border-gray-300 rounded text-sm"
                />
                <textarea
                  name="companyAddress"
                  placeholder="Alamat Syarikat"
                  rows="3"
                  value={formData.companyAddress}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 rounded text-sm"
                />
              </div>

{/* Pelanggan */}
              <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
                <label className="block text-xs font-bold text-gray-700 uppercase mb-2">Kepada (Pelanggan)</label>
                <input
                  type="text"
                  name="clientName"
                  placeholder="Nama Pelanggan"
                  value={formData.clientName}
                  onChange={handleInputChange}
                  className="w-full p-2 mb-2 border border-gray-300 rounded text-sm"
                />
                <textarea
                  name="clientAddress"
                  placeholder="Alamat Pelanggan"
                  rows="3"
                  value={formData.clientAddress}
                  onChange={handleInputChange}
                  className="w-full p-2 border border-gray-300 rounded text-sm"
                />
              </div>
            </div>
          </div>

{/* Card: Item */}
          <div className="bg-white p-5 rounded-xl shadow-sm border border-gray-200">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-semibold text-blue-900">Senarai Item</h2>
              <button onClick={addItem} className="text-xs bg-blue-600 text-white px-2 py-1 rounded hover:bg-blue-700 flex items-center">
                <Plus className="w-3 h-3 mr-1" /> Tambah
              </button>
            </div>

<div className="space-y-3">
              {items.map((item) => (
                <div key={item.id} className="flex flex-col gap-2 p-3 border border-gray-100 rounded bg-gray-50 relative group">
                  <button 
                    onClick={() => deleteItem(item.id)}
                    className="absolute top-2 right-2 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                  <input
                    type="text"
                    placeholder="Perkhidmatan / Produk"
                    value={item.description}
                    onChange={(e) => handleItemChange(item.id, 'description', e.target.value)}
                    className="w-full p-2 border border-gray-300 rounded text-sm font-medium"
                  />
                  <div className="flex gap-2">
                    <div className="w-1/3">
                      <label className="text-xs text-gray-500">Kuantiti</label>
                      <input
                        type="number"
                        min="1"
                        value={item.quantity}
                        onChange={(e) => handleItemChange(item.id, 'quantity', Number(e.target.value))}
                        className="w-full p-2 border border-gray-300 rounded text-sm text-center"
                      />
                    </div>
                    <div className="w-2/3">
                      <label className="text-xs text-gray-500">Harga Seunit (RM)</label>
                      <input
                        type="number"
                        min="0"
                        step="0.01"
                        value={item.price}
                        onChange={(e) => handleItemChange(item.id, 'price', Number(e.target.value))}
                        className="w-full p-2 border border-gray-300 rounded text-sm text-right"
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

</div>

{/* PREVIEW SECTION - This gets converted to Image */}
        <div className="w-full lg:w-2/3 flex justify-center print:w-full print:block print:absolute print:top-0 print:left-0 print:m-0">
          <div id="document-preview" className="bg-white w-full max-w-[210mm] min-h-[297mm] shadow-2xl print:shadow-none p-[15mm] md:p-[20mm] relative text-sm text-gray-900 leading-relaxed print:w-full print:max-w-none print:h-screen print:overflow-hidden">

{/* Header */}
            <div className="flex justify-between items-start mb-12 border-b-2 border-gray-800 pb-6">
              <div className="w-1/2 pr-4">
                <h1 className="text-2xl font-bold uppercase text-gray-800 mb-1">{formData.companyName || "NAMA SYARIKAT"}</h1>
                <p className="whitespace-pre-line text-gray-600 text-sm">{formData.companyAddress || "Alamat Syarikat..."}</p>
              </div>
              <div className="w-1/2 text-right">
                <h2 className="text-4xl font-black text-gray-200 uppercase tracking-widest">{getDocTitle()}</h2>
                <div className="mt-4 flex flex-col items-end">
                  <div className="flex justify-between w-48 mb-1">
                    <span className="font-semibold text-gray-600">{getRefLabel()}:</span>
                    <span className="font-bold">{formData.docNumber}</span>
                  </div>
                  <div className="flex justify-between w-48">
                    <span className="font-semibold text-gray-600">Tarikh:</span>
                    <span>{formData.date}</span>
                  </div>
                </div>
              </div>
            </div>

{/* Client Info */}
            <div className="mb-12">
              <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">Kepada:</h3>
              <div className="text-lg font-bold mb-1">{formData.clientName || "Nama Pelanggan"}</div>
              <div className="whitespace-pre-line text-gray-600 w-1/2">{formData.clientAddress || "Alamat Pelanggan..."}</div>
            </div>

{/* Table */}
            <table className="w-full mb-8">
              <thead>
                <tr className="bg-gray-800 text-white">
                  <th className="py-3 px-4 text-left w-12 text-xs uppercase font-semibold rounded-tl-lg">No.</th>
                  <th className="py-3 px-4 text-left text-xs uppercase font-semibold">Perkhidmatan / Produk</th>
                  <th className="py-3 px-4 text-center w-24 text-xs uppercase font-semibold">Kuantiti</th>
                  <th className="py-3 px-4 text-right w-32 text-xs uppercase font-semibold">Harga Unit</th>
                  <th className="py-3 px-4 text-right w-32 text-xs uppercase font-semibold rounded-tr-lg">Jumlah</th>
                </tr>
              </thead>
              <tbody>
                {items.map((item, index) => (
                  <tr key={item.id} className="border-b border-gray-200">
                    <td className="py-4 px-4 text-gray-500">{index + 1}</td>
                    <td className="py-4 px-4 font-medium">{item.description}</td>
                    <td className="py-4 px-4 text-center">{item.quantity}</td>
                    <td className="py-4 px-4 text-right">{formatCurrency(item.price)}</td>
                    <td className="py-4 px-4 text-right font-semibold">{formatCurrency(item.quantity * item.price)}</td>
                  </tr>
                ))}
              </tbody>
            </table>

{/* Total Section */}
            <div className="flex justify-end">
              <div className="w-64 bg-gray-50 p-4 rounded-lg border border-gray-100 print:bg-gray-50">
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold text-gray-800">JUMLAH BESAR</span>
                  <span className="text-xl font-bold text-blue-900">{formatCurrency(calculateTotal())}</span>
                </div>
              </div>
            </div>

{/* Footer / Notes */}
            <div className="absolute bottom-[20mm] left-[20mm] right-[20mm]">
              <div className="border-t border-gray-300 pt-4">
                <h4 className="font-bold text-xs text-gray-500 uppercase mb-2">Terma & Syarat / Nota:</h4>
                <p className="text-xs text-gray-500 italic">
                  1. Pembayaran hendaklah dibuat dalam masa 30 hari dari tarikh invois.<br/>
                  2. Cek hendaklah ditulis atas nama <span className="font-semibold">{formData.companyName}</span>.<br/>
                  3. Terima kasih atas sokongan anda.
                </p>
              </div>

<div className="mt-8 flex justify-between items-end">
                 <div className="text-center">
                    <div className="border-b border-gray-400 w-40 mb-2"></div>
                    <p className="text-xs font-semibold text-gray-500">Tandatangan Penerima</p>
                 </div>
                 <div className="text-center">
                    <div className="border-b border-gray-400 w-40 mb-2"></div>
                    <p className="text-xs font-semibold text-gray-500">Tandatangan Syarikat</p>
                 </div>
              </div>
            </div>

</div>
        </div>
      </div>

{/* CSS untuk menyembunyikan elemen UI semasa mencetak (backup) */}
      <style>{`
        @media print {
          @page { margin: 0; size: A4; }
          body { 
            background: white; 
            -webkit-print-color-adjust: exact; 
            print-color-adjust: exact;
          }
          /* Sembunyikan semua UI editor */
          nav, button, input, textarea, .print\\:hidden { display: none !important; }

/* Pastikan dokumen memenuhi ruang */
          #document-preview {
            width: 210mm;
            height: 297mm;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 20mm !important;
            box-shadow: none;
            overflow: hidden;
          }
        }
      `}</style>
    </div>
  );
}