'use client';

import React, { useState, useEffect } from 'react';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { useFoodMartStore } from '@/store/foodmart';
import { toast } from '@/hooks/use-toast';
import { MessageCircle, QrCode, Banknote, Loader2, CheckCircle2 } from 'lucide-react';

interface StoreSettings {
  storeName: string;
  whatsapp: string;
  freeShippingThreshold: number;
  shippingRate: number;
  codAvailable: boolean;
  qrisImage: string;
}

interface CheckoutModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat('id-ID').format(price);
}

const PAYMENT_METHODS = [
  { id: 'whatsapp', label: 'WhatsApp', icon: MessageCircle, color: 'emerald', desc: 'Bayar via transfer konfirmasi WhatsApp' },
  { id: 'qris', label: 'QRIS', icon: QrCode, color: 'purple', desc: 'Scan QR untuk bayar instan' },
  { id: 'cod', label: 'COD', icon: Banknote, color: 'blue', desc: 'Bayar di tempat saat pesanan tiba' },
];

export default function CheckoutModal({ open, onOpenChange, onSuccess }: CheckoutModalProps) {
  const cart = useFoodMartStore((s) => s.cart);
  const getCartTotal = useFoodMartStore((s) => s.getCartTotal);
  const clearCart = useFoodMartStore((s) => s.clearCart);
  const selectedBranch = useFoodMartStore((s) => s.selectedBranch);

  const [settings, setSettings] = useState<StoreSettings | null>(null);
  const [buyerName, setBuyerName] = useState('');
  const [buyerPhone, setBuyerPhone] = useState('');
  const [buyerAddress, setBuyerAddress] = useState('');
  const [buyerNotes, setBuyerNotes] = useState('');
  const [paymentMethod, setPaymentMethod] = useState('whatsapp');
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const subtotal = getCartTotal();
  const shipping = settings ? (subtotal >= settings.freeShippingThreshold ? 0 : settings.shippingRate) : 0;
  const total = subtotal + shipping;

  useEffect(() => {
    async function fetchSettings() {
      try {
        const res = await fetch('/api/settings');
        const data = await res.json();
        if (data.success) setSettings(data.data);
      } catch { /* silent */ }
    }
    fetchSettings();
  }, []);

  const handleCheckout = async () => {
    if (!buyerName.trim() || !buyerPhone.trim() || !buyerAddress.trim()) {
      toast({ title: 'Data Belum Lengkap', description: 'Mohon isi nama, nomor HP, dan alamat pengiriman.', variant: 'destructive' });
      return;
    }
    setLoading(true);
    try {
      const items = cart.map((item) => ({ id: item.id, name: item.name, price: item.price, quantity: item.quantity, variant: item.variant, note: item.note }));
      const body: Record<string, unknown> = { buyerName, buyerPhone, buyerAddress, buyerNotes, paymentMethod, items };
      if (selectedBranch) body.branchId = selectedBranch.id;

      const res = await fetch('/api/invoice', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
      const data = await res.json();
      if (!data.success) throw new Error(data.error || 'Gagal membuat pesanan');

      const invoiceNumber = data.data.invoiceNumber;
      const invoiceTotal = data.data.total;
      const paymentLabel = { whatsapp: 'Transfer via WhatsApp', qris: 'QRIS', cod: 'Bayar di Tempat (COD)' }[paymentMethod] || paymentMethod.toUpperCase();

      let message = `Halo admin! 👋\n\nSaya ingin memesan makanan berikut:\n\n`;
      message += `📋 *Detail Pesanan*\nNo. Invoice: *${invoiceNumber}*\n`;
      message += `Tanggal: ${new Date().toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}\n\n`;
      message += `📦 *Pesanan Saya:*\n`;
      cart.forEach((item, i) => {
        message += `${i + 1}. *${item.name}*\n   ${item.quantity}x @ Rp ${formatPrice(item.price)} = Rp ${formatPrice(item.price * item.quantity)}\n`;
        if (item.variant && item.variant !== 'Regular') message += `   Ukuran: ${item.variant}\n`;
        if (item.note) message += `   Catatan: ${item.note}\n`;
      });
      message += `\n📍 *Data Pengiriman*\nNama: ${buyerName}\nNo. HP: ${buyerPhone}\nAlamat: ${buyerAddress}\n`;
      if (selectedBranch) message += `Cabang: ${selectedBranch.name}\n`;
      if (buyerNotes) message += `Catatan Tambahan: ${buyerNotes}\n`;
      message += `\n💰 *Rincian Pembayaran*\nSubtotal Menu: Rp ${formatPrice(subtotal)}\n`;
      message += `Ongkos Kirim: ${shipping === 0 ? '*GRATIS!* 🎉' : `Rp ${formatPrice(shipping)}`}\n`;
      message += `━━━━━━━━━━━━━━\n*TOTAL BAYAR: Rp ${formatPrice(invoiceTotal)}*\nMetode Bayar: ${paymentLabel}\n\n`;
      message += `Mohon dikonfirmasi pesanan saya ya. Terima kasih! 🙏\n\n`;
      message += `_Pesanan ini dibuat otomatis oleh sistem ${settings?.storeName || 'FoodMart'}_`;

      const waNumber = settings?.whatsapp || '6281234567890';
      window.open(`https://wa.me/${waNumber}?text=${encodeURIComponent(message)}`, '_blank');
      clearCart();
      setSuccess(true);
      toast({ title: 'Pesanan Berhasil Dikirim! 🎉', description: `Invoice #${invoiceNumber} — Silakan konfirmasi pesanan Anda di WhatsApp.` });
      setTimeout(() => { setSuccess(false); onOpenChange(false); onSuccess(); }, 3000);
    } catch (error) {
      toast({ title: 'Gagal Memesan', description: error instanceof Error ? error.message : 'Terjadi kesalahan. Coba lagi.', variant: 'destructive' });
    } finally {
      setLoading(false);
    }
  };

  const availableMethods = PAYMENT_METHODS.filter((m) => {
    if (m.id === 'cod' && settings && !settings.codAvailable) return false;
    if (m.id === 'qris' && settings && !settings.qrisImage) return false;
    return true;
  });

  const colorMap: Record<string, { border: string; bg: string; text: string; iconBg: string }> = {
    emerald: { border: 'border-emerald-500/50', bg: 'bg-emerald-500/10', text: 'text-emerald-400', iconBg: 'bg-emerald-500/20' },
    purple: { border: 'border-purple-500/50', bg: 'bg-purple-500/10', text: 'text-purple-400', iconBg: 'bg-purple-500/20' },
    blue: { border: 'border-sky-500/50', bg: 'bg-sky-500/10', text: 'text-sky-400', iconBg: 'bg-sky-500/20' },
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] overflow-y-auto border-[var(--border-hover)] bg-[var(--bg-secondary)] sm:max-w-lg rounded-2xl">
        {success ? (
          <div className="flex flex-col items-center gap-4 py-12 text-center">
            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-emerald-500/20">
              <CheckCircle2 className="h-10 w-10 text-emerald-400" />
            </div>
            <h3 className="text-xl font-bold text-[var(--text-primary)]">Pesanan Berhasil! 🎉</h3>
            <p className="text-sm text-[var(--text-secondary)]">Pesanan sedang diproses. Silakan lanjutkan pembayaran melalui WhatsApp.</p>
          </div>
        ) : (
          <>
            <DialogHeader>
              <DialogTitle className="text-[var(--text-primary)]">Checkout</DialogTitle>
              <DialogDescription>Isi data pengiriman dan pilih metode pembayaran</DialogDescription>
            </DialogHeader>
            <div className="flex flex-col gap-5 pt-2">
              {/* Branch info */}
              {selectedBranch && (
                <div className="rounded-xl border border-[var(--border-default)] bg-[var(--bg-input)] p-3">
                  <p className="text-xs font-medium text-[var(--text-secondary)]">Cabang Terpilih</p>
                  <p className="text-sm font-semibold text-[var(--text-primary)]">{selectedBranch.name}</p>
                </div>
              )}

              <div className="flex flex-col gap-3">
                <h4 className="text-sm font-semibold text-[var(--text-primary)]">Data Pengiriman</h4>
                <div className="space-y-2">
                  <div>
                    <Label className="text-[var(--text-secondary)] text-xs">Nama Lengkap *</Label>
                    <Input value={buyerName} onChange={(e) => setBuyerName(e.target.value)} placeholder="Masukkan nama lengkap"
                      className="border-[var(--border-hover)] bg-[var(--bg-input)] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--accent-300)] rounded-xl" />
                  </div>
                  <div>
                    <Label className="text-[var(--text-secondary)] text-xs">Nomor WhatsApp *</Label>
                    <Input value={buyerPhone} onChange={(e) => setBuyerPhone(e.target.value)} placeholder="08xxxxxxxxxx"
                      className="border-[var(--border-hover)] bg-[var(--bg-input)] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--accent-300)] rounded-xl" />
                  </div>
                  <div>
                    <Label className="text-[var(--text-secondary)] text-xs">Alamat Pengiriman *</Label>
                    <Textarea value={buyerAddress} onChange={(e) => setBuyerAddress(e.target.value)} placeholder="Alamat lengkap pengiriman" rows={2}
                      className="border-[var(--border-hover)] bg-[var(--bg-input)] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--accent-300)] rounded-xl resize-none" />
                  </div>
                  <div>
                    <Label className="text-[var(--text-secondary)] text-xs">Catatan (Opsional)</Label>
                    <Input value={buyerNotes} onChange={(e) => setBuyerNotes(e.target.value)} placeholder="Catatan tambahan"
                      className="border-[var(--border-hover)] bg-[var(--bg-input)] text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:border-[var(--accent-300)] rounded-xl" />
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-2 rounded-xl border border-[var(--border-default)] bg-[var(--bg-input)] p-4">
                <h4 className="text-sm font-semibold text-[var(--text-primary)]">Ringkasan Pesanan</h4>
                {cart.map((item, i) => (
                  <div key={i} className="flex items-center justify-between text-sm">
                    <span className="text-[var(--text-secondary)] truncate mr-2">{item.name} x{item.quantity}</span>
                    <span className="text-[var(--text-primary)] shrink-0">Rp {formatPrice(item.price * item.quantity)}</span>
                  </div>
                ))}
                <div className="mt-2 border-t border-[var(--border-hover)] pt-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-[var(--text-tertiary)]">Subtotal</span>
                    <span className="text-[var(--text-primary)]">Rp {formatPrice(subtotal)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-[var(--text-tertiary)]">Ongkir</span>
                    <span className={shipping === 0 ? 'text-emerald-400' : 'text-[var(--text-primary)]'}>{shipping === 0 ? 'GRATIS' : `Rp ${formatPrice(shipping)}`}</span>
                  </div>
                  <div className="mt-1 flex justify-between text-base font-bold">
                    <span className="text-[var(--text-primary)]">Total</span>
                    <span className="text-[var(--accent-400)]">Rp {formatPrice(total)}</span>
                  </div>
                </div>
              </div>

              <div className="flex flex-col gap-3">
                <h4 className="text-sm font-semibold text-[var(--text-primary)]">Metode Pembayaran</h4>
                <div className="grid gap-2">
                  {availableMethods.map((method) => {
                    const colors = colorMap[method.color];
                    const isSelected = paymentMethod === method.id;
                    return (
                      <button key={method.id} onClick={() => setPaymentMethod(method.id)}
                        className={`flex items-center gap-3 rounded-xl border p-4 text-left transition-all ${isSelected ? `${colors.border} ${colors.bg}` : 'border-[var(--border-hover)] bg-[var(--bg-input)] hover:border-[var(--border-hover)]'}`}>
                        <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${isSelected ? colors.iconBg : 'bg-[var(--bg-hover)]'}`}>
                          <method.icon className={`h-5 w-5 ${isSelected ? colors.text : 'text-[var(--text-tertiary)]'}`} />
                        </div>
                        <div>
                          <p className={`text-sm font-semibold ${isSelected ? colors.text : 'text-[var(--text-secondary)]'}`}>{method.label}</p>
                          <p className="text-xs text-[var(--text-tertiary)]">{method.desc}</p>
                        </div>
                        <div className={`ml-auto h-5 w-5 rounded-full border-2 ${isSelected ? `${colors.border} ${colors.bg}` : 'border-[var(--border-hover)]'}`}>
                          {isSelected && <div className="flex h-full w-full items-center justify-center"><div className={`h-2.5 w-2.5 rounded-full ${colors.bg.replace('/10', '/60')}`} /></div>}
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>

              <Button onClick={handleCheckout} disabled={loading || cart.length === 0}
                className="w-full rounded-xl bg-gradient-to-r from-[var(--accent-500)] to-[var(--accent-400)] py-6 text-base font-semibold text-white shadow-lg transition-all hover:shadow-xl active:scale-[0.98] disabled:opacity-50">
                {loading ? (<><Loader2 className="mr-2 h-5 w-5 animate-spin" />Memproses...</>)
                  : (<><MessageCircle className="mr-2 h-5 w-5" />Pesan via WhatsApp</>)}
              </Button>
            </div>
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}