'use client';

import React, { useState } from 'react';
import { Coins, X, CheckCircle2, RefreshCw, Sparkles, ShieldCheck } from 'lucide-react';

interface UnitPurchaseModalProps {
  isOpen?: boolean;
  onClose: () => void;
  onSuccess?: () => void;
  userEmail?: string;
}

export default function UnitPurchaseModal({
  isOpen = true,
  onClose,
  onSuccess,
}: UnitPurchaseModalProps) {
  const [selectedUnits, setSelectedUnits] = useState('2500');
  const [customUnits, setCustomUnits] = useState('');
  const [loading, setLoading] = useState(false);
  const [successMsg, setSuccessMsg] = useState<string | null>(null);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  if (!isOpen) return null;

  const handlePurchase = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setSuccessMsg(null);
    setErrorMsg(null);

    const units = parseFloat(customUnits || selectedUnits);

    try {
      const res = await fetch('/api/v1/wallet', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ units }),
      });
      const data = await res.json();
      if (!data.success) {
        throw new Error(data.error?.message || 'Purchase failed');
      }

      setSuccessMsg(`Successfully allocated ${units.toLocaleString()} Units to your account!`);
      setTimeout(() => {
        if (onSuccess) onSuccess();
        onClose();
        setSuccessMsg(null);
      }, 1200);
    } catch (err: any) {
      setErrorMsg(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-md w-full p-6 sm:p-7 space-y-5 animate-in fade-in zoom-in-95 duration-150">
        <div className="flex items-center justify-between border-b border-slate-100 pb-3.5">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-xl bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-600">
              <Coins className="w-4 h-4" />
            </div>
            <h3 className="text-base font-bold text-slate-900">
              Purchase Sandbox Units
            </h3>
          </div>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 p-1 rounded-lg"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {successMsg && (
          <div className="p-3 bg-emerald-50 border border-emerald-200 text-xs text-emerald-800 rounded-xl flex items-center gap-2">
            <CheckCircle2 className="w-4 h-4 shrink-0 text-emerald-600" />
            <span className="font-semibold">{successMsg}</span>
          </div>
        )}

        {errorMsg && (
          <div className="p-3 bg-rose-50 border border-rose-200 text-xs text-rose-800 rounded-xl">
            {errorMsg}
          </div>
        )}

        <form onSubmit={handlePurchase} className="space-y-4 text-xs">
          <div>
            <label className="block font-bold text-slate-700 mb-2">
              Select Unit Bundle:
            </label>
            <div className="grid grid-cols-2 gap-2.5">
              {[
                { units: '1000', label: '1,000 Units', desc: '100 NIN Lookups' },
                { units: '2500', label: '2,500 Units', desc: '250 NIN Lookups' },
                { units: '5000', label: '5,000 Units', desc: '500 NIN Lookups' },
                { units: '10000', label: '10,000 Units', desc: '1,000 NIN Lookups' },
              ].map((b) => {
                const isSelected = selectedUnits === b.units && !customUnits;
                return (
                  <div
                    key={b.units}
                    onClick={() => {
                      setSelectedUnits(b.units);
                      setCustomUnits('');
                    }}
                    className={`p-3 rounded-xl border cursor-pointer transition-all text-left ${
                      isSelected
                        ? 'bg-amber-50 border-amber-400 text-amber-950 font-bold shadow-sm'
                        : 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'
                    }`}
                  >
                    <div className="font-bold text-xs">{b.label}</div>
                    <div className="text-[10.5px] text-slate-500 mt-0.5">{b.desc}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div>
            <label className="block font-bold text-slate-700 mb-1">
              Or Enter Custom Units:
            </label>
            <input
              type="number"
              min={100}
              step={50}
              value={customUnits}
              onChange={(e) => setCustomUnits(e.target.value)}
              placeholder="e.g. 7500"
              className="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 font-mono text-slate-900 text-xs focus:outline-none focus:border-[#00875a]"
            />
          </div>

          <div className="p-3 rounded-xl bg-slate-50 border border-slate-200/80 text-[11px] text-slate-500 space-y-1">
            <div className="flex justify-between">
              <span>Unit Rate:</span>
              <span className="font-bold text-slate-800">5.0 NGN / Unit (Sandbox Test Mode)</span>
            </div>
            <div className="flex justify-between">
              <span>Billing Guarantee:</span>
              <span className="text-emerald-700 font-semibold">Zero deduction on failed requests</span>
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-2 border-t border-slate-100">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-slate-600 font-bold hover:bg-slate-100 rounded-xl"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="px-5 py-2.5 bg-[#00875a] hover:bg-[#00693e] text-white font-bold rounded-xl shadow-md transition-all flex items-center gap-2 disabled:opacity-50"
            >
              {loading ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Coins className="w-3.5 h-3.5" />}
              <span>Add Units</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}