'use client'

interface ReceiptPreviewProps {
  restaurantName: string
  storeName: string
  headerLine1: string
  headerLine2: string
  headerLine3: string
  footerLine1: string
  footerLine2: string
  footerLine3: string
  showFeedbackQr?: boolean
}

export default function ReceiptPreview({
  restaurantName,
  storeName,
  headerLine1,
  headerLine2,
  headerLine3,
  footerLine1,
  footerLine2,
  footerLine3,
  showFeedbackQr,
}: ReceiptPreviewProps) {
  const hasHeader = headerLine1 || headerLine2 || headerLine3
  const fl1 = footerLine1 || 'Terima kasih!'
  const fl2 = footerLine2 || 'Silahkan datang lagi'

  return (
    <div className="flex flex-col items-center">
      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium">Preview Struk</p>
      <div
        className="bg-white border border-gray-200 shadow-lg rounded-t-md overflow-hidden"
        style={{ width: 280, fontFamily: "'Courier New', Courier, monospace", fontSize: 11, color: '#000' }}
      >
        <div className="px-3 py-2">
          {/* Header */}
          <div className="border-t-2 border-black my-1" />
          <div className="text-center font-bold text-sm">{restaurantName || 'Nama Restoran'}</div>
          <div className="text-center text-[10px]">{storeName || 'Cabang Utama'}</div>
          {hasHeader && (
            <>
              {headerLine1 && <div className="text-center text-[10px]">{headerLine1}</div>}
              {headerLine2 && <div className="text-center text-[10px]">{headerLine2}</div>}
              {headerLine3 && <div className="text-center text-[10px]">{headerLine3}</div>}
            </>
          )}
          <div className="border-t-2 border-black my-1" />

          {/* Order info */}
          <div className="flex justify-between"><span>No:</span><span className="font-bold">ORD-001</span></div>
          <div>Meja: 5 | DINE-IN</div>
          <div className="flex justify-between"><span>Tanggal:</span><span>05/03/2026 12:00</span></div>
          <div className="flex justify-between"><span>Nama:</span><span>John</span></div>

          {/* Items */}
          <div className="border-t border-dashed border-black my-1" />
          <div className="flex justify-between"><span>2x Nasi Goreng</span><span>50.000</span></div>
          <div className="pl-3 text-[10px] text-gray-600">[Pedas, Telur Mata]</div>
          <div className="flex justify-between"><span>1x Es Teh Manis</span><span>8.000</span></div>
          <div className="border-t border-dashed border-black my-1" />

          {/* Totals */}
          <div className="flex justify-between"><span>Subtotal:</span><span>58.000</span></div>
          <div className="flex justify-between"><span>Pajak (11%):</span><span>6.380</span></div>
          <div className="flex justify-between text-gray-500"><span>Pembulatan:</span><span>+20</span></div>
          <div className="border-t border-dashed border-black my-1" />
          <div className="flex justify-between font-bold text-sm"><span>TOTAL:</span><span>64.400</span></div>
          <div className="border-t border-dashed border-black my-1" />

          {/* Payment */}
          <div className="flex justify-between"><span>Bayar:</span><span>Cash</span></div>
          <div className="flex justify-between"><span>Tunai:</span><span>70.000</span></div>
          <div className="flex justify-between"><span>Kembali:</span><span>5.600</span></div>
          <div className="border-t border-dashed border-black my-1" />

          {/* Footer */}
          <div className="text-center mt-2">
            {fl1 && <div className="font-bold">{fl1}</div>}
            {fl2 && <div className="text-[10px]">{fl2}</div>}
            {footerLine3 && <div className="text-[10px]">{footerLine3}</div>}
          </div>
          {/* Feedback QR */}
          {showFeedbackQr && (
            <>
              <div className="border-t border-dashed border-black my-1" />
              <div className="text-center text-[10px] mt-1">Scan untuk feedback:</div>
              <div className="flex justify-center my-1">
                <div
                  className="border-2 border-dashed border-gray-400 rounded flex flex-col items-center justify-center"
                  style={{ width: 80, height: 80 }}
                >
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="3" height="3" /><line x1="21" y1="14" x2="21" y2="21" /><line x1="14" y1="21" x2="21" y2="21" />
                  </svg>
                  <span className="text-[8px] text-gray-400 mt-0.5">QR Feedback</span>
                </div>
              </div>
            </>
          )}
          {/* Branding - not removable */}
          <div className="text-center text-[9px] mt-1" style={{ color: '#999' }}>Powered by restomenu.id</div>
          <div className="border-t-2 border-black my-1" />
          <div className="h-3" />
        </div>
      </div>
      {/* Paper tear effect */}
      <div
        className="bg-white border-x border-gray-200"
        style={{
          width: 280,
          height: 8,
          backgroundImage: 'linear-gradient(135deg, transparent 33.33%, #e5e7eb 33.33%, #e5e7eb 50%, transparent 50%, transparent 83.33%, #e5e7eb 83.33%, #e5e7eb 100%)',
          backgroundSize: '8px 8px',
        }}
      />
    </div>
  )
}