import { useState } from "react";
import { CreditCard, Download, DollarSign, Package, Zap, Plus, Trash2 } from "lucide-react";
import { INVOICES, SAVED_PAYMENT_METHODS, PREPAID_PACKAGES, Invoice } from "../mockData.js";

interface Props {
  readOnly: boolean;
}

const STATUS_STYLES: Record<string, string> = {
  paid: "bg-green-100 text-green-700",
  outstanding: "bg-amber-100 text-amber-700",
  overdue: "bg-red-100 text-red-700",
};

export function BillingPayments({ readOnly }: Props) {
  const [tab, setTab] = useState<"invoices" | "payment" | "packages">("invoices");
  const [autopay, setAutopay] = useState(false);
  const [showTipModal, setShowTipModal] = useState(false);
  const [showPaymentModal, setShowPaymentModal] = useState(false);

  const outstanding = INVOICES.filter(i => i.status === "outstanding");
  const totalOutstanding = outstanding.reduce((sum, i) => sum + i.amount, 0);

  return (
    <div className="space-y-6">
      {/* Outstanding Balance Banner */}
      {totalOutstanding > 0 && (
        <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <div>
            <p className="text-sm text-stone-500">Outstanding Balance</p>
            <p className="text-3xl font-bold text-stone-800">${totalOutstanding.toFixed(2)}</p>
            <p className="text-xs text-stone-400 mt-0.5">{outstanding.length} unpaid invoice{outstanding.length > 1 ? "s" : ""}</p>
          </div>
          {!readOnly && (
            <div className="flex gap-2">
              <button
                onClick={() => setShowTipModal(true)}
                className="px-4 py-2 border border-stone-200 rounded-lg text-sm font-medium text-stone-600 hover:bg-stone-50"
              >
                Add Tip
              </button>
              <button
                onClick={() => setShowPaymentModal(true)}
                className="px-6 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover)"
              >
                Pay Now
              </button>
            </div>
          )}
        </div>
      )}

      {/* Tabs */}
      <div className="flex gap-2">
        {([
          { id: "invoices" as const, label: "Invoices", icon: DollarSign },
          { id: "payment" as const, label: "Payment Methods", icon: CreditCard },
          { id: "packages" as const, label: "Packages", icon: Package },
        ]).map(({ id, label, icon: Icon }) => (
          <button
            key={id}
            onClick={() => setTab(id)}
            className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium ${
              tab === id ? "bg-(--color-accent-light) text-(--color-accent-dark)" : "text-stone-500 hover:bg-stone-50"
            }`}
          >
            <Icon size={14} />
            {label}
          </button>
        ))}
      </div>

      {/* Invoices */}
      {tab === "invoices" && (
        <div className="bg-white rounded-2xl border border-stone-200 shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-left text-xs text-stone-400 border-b border-stone-100">
                  <th className="px-5 py-3 font-medium">Date</th>
                  <th className="px-5 py-3 font-medium">Items</th>
                  <th className="px-5 py-3 font-medium">Amount</th>
                  <th className="px-5 py-3 font-medium">Status</th>
                  <th className="px-5 py-3 font-medium"></th>
                </tr>
              </thead>
              <tbody>
                {INVOICES.map(inv => (
                  <tr key={inv.id} className="border-b border-stone-50 hover:bg-stone-50/50">
                    <td className="px-5 py-3 text-stone-700">
                      {new Date(inv.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
                    </td>
                    <td className="px-5 py-3 text-stone-600">{inv.items.join(", ")}</td>
                    <td className="px-5 py-3 font-medium text-stone-800">${inv.amount.toFixed(2)}</td>
                    <td className="px-5 py-3">
                      <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_STYLES[inv.status]}`}>
                        {inv.status}
                      </span>
                    </td>
                    <td className="px-5 py-3">
                      <button className="text-stone-400 hover:text-stone-600">
                        <Download size={14} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Payment Methods */}
      {tab === "payment" && (
        <div className="space-y-4">
          <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm space-y-3">
            {SAVED_PAYMENT_METHODS.map(pm => (
              <div key={pm.id} className="flex items-center justify-between py-2 border-b border-stone-50 last:border-0">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-stone-100 flex items-center justify-center">
                    <CreditCard size={18} className="text-stone-500" />
                  </div>
                  <div>
                    <p className="text-sm font-medium text-stone-800 capitalize">{pm.type} •••• {pm.last4}</p>
                    <p className="text-xs text-stone-400">Expires {pm.expiry}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {pm.isDefault && (
                    <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">Default</span>
                  )}
                  {!readOnly && (
                    <button className="p-1 text-stone-400 hover:text-red-500">
                      <Trash2 size={14} />
                    </button>
                  )}
                </div>
              </div>
            ))}
            {!readOnly && (
              <button className="flex items-center gap-2 text-sm text-(--color-accent-dark) font-medium hover:underline mt-2">
                <Plus size={14} />
                Add Payment Method
              </button>
            )}
          </div>

          {/* Autopay */}
          <div className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-(--color-accent-light) flex items-center justify-center">
                  <Zap size={18} className="text-(--color-accent)" />
                </div>
                <div>
                  <p className="text-sm font-medium text-stone-800">Autopay</p>
                  <p className="text-xs text-stone-500">Automatically charge after each appointment</p>
                </div>
              </div>
              {!readOnly ? (
                <button
                  onClick={() => setAutopay(!autopay)}
                  className={`w-12 h-6 rounded-full transition-colors ${autopay ? "bg-(--color-accent)" : "bg-stone-300"}`}
                >
                  <div className={`w-5 h-5 bg-white rounded-full shadow transition-transform ${autopay ? "translate-x-6" : "translate-x-0.5"}`} />
                </button>
              ) : (
                <span className="text-xs text-stone-400">{autopay ? "Enabled" : "Disabled"}</span>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Packages */}
      {tab === "packages" && (
        <div className="space-y-4">
          {PREPAID_PACKAGES.map(pkg => (
            <div key={pkg.id} className="bg-white rounded-2xl border border-stone-200 p-5 shadow-sm">
              <div className="flex items-center gap-3 mb-3">
                <Package size={20} className="text-(--color-accent)" />
                <h3 className="font-medium text-stone-800">{pkg.name}</h3>
              </div>
              <div className="flex items-center gap-4 mb-3">
                <div>
                  <p className="text-2xl font-bold text-stone-800">{pkg.totalCredits - pkg.usedCredits}</p>
                  <p className="text-xs text-stone-500">remaining of {pkg.totalCredits}</p>
                </div>
                <div className="flex-1 bg-stone-100 rounded-full h-3 overflow-hidden">
                  <div
                    className="bg-(--color-accent) h-full rounded-full"
                    style={{ width: `${((pkg.totalCredits - pkg.usedCredits) / pkg.totalCredits) * 100}%` }}
                  />
                </div>
              </div>
              <p className="text-xs text-stone-400">Expires {new Date(pkg.expiresAt).toLocaleDateString()}</p>
            </div>
          ))}
        </div>
      )}

      {/* Tip Modal */}
      {showTipModal && !readOnly && (
        <TipModal onClose={() => setShowTipModal(false)} />
      )}

      {/* Payment Modal */}
      {showPaymentModal && !readOnly && (
        <PaymentModal
          outstanding={outstanding}
          totalOutstanding={totalOutstanding}
          onClose={() => setShowPaymentModal(false)}
        />
      )}
    </div>
  );
}

function PaymentModal({ outstanding, totalOutstanding: _totalOutstanding, onClose }: { outstanding: Invoice[]; totalOutstanding: number; onClose: () => void }) {
  const [selectedInvoices, setSelectedInvoices] = useState<Set<string>>(new Set(outstanding.map(i => i.id)));
  const [isProcessing, setIsProcessing] = useState(false);
  const [isComplete, setIsComplete] = useState(false);

  const toggleInvoice = (id: string) => {
    const next = new Set(selectedInvoices);
    if (next.has(id)) {
      next.delete(id);
    } else {
      next.add(id);
    }
    setSelectedInvoices(next);
  };

  const handlePay = async () => {
    setIsProcessing(true);
    // Simulate payment processing
    await new Promise(resolve => setTimeout(resolve, 1500));
    setIsProcessing(false);
    setIsComplete(true);
  };

  const selectedTotal = outstanding.filter(i => selectedInvoices.has(i.id)).reduce((sum, i) => sum + i.amount, 0);

  if (isComplete) {
    return (
      <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-8 text-center">
          <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h2 className="font-semibold text-stone-800 text-lg mb-2">Payment Successful</h2>
          <p className="text-stone-500 text-sm mb-6">Your payment of ${selectedTotal.toFixed(2)} has been processed. A receipt has been sent to your email.</p>
          <button onClick={onClose} className="w-full px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium">
            Done
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
        <div className="flex items-center justify-between mb-6">
          <h2 className="font-semibold text-stone-800 text-lg">Pay Outstanding Balance</h2>
          <button onClick={onClose} className="text-stone-400 hover:text-stone-600">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <p className="text-sm text-stone-500 mb-4">Select invoices to pay:</p>

        <div className="space-y-3 mb-6">
          {outstanding.map(inv => (
            <label
              key={inv.id}
              className={`flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors ${
                selectedInvoices.has(inv.id) ? "border-(--color-accent) bg-(--color-accent-lighter)" : "border-stone-200 hover:border-stone-300"
              }`}
            >
              <div className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={selectedInvoices.has(inv.id)}
                  onChange={() => toggleInvoice(inv.id)}
                  className="w-4 h-4 rounded border-stone-300 text-(--color-accent) focus:ring-(--color-accent)"
                />
                <div>
                  <p className="text-sm font-medium text-stone-800">{inv.items.join(", ")}</p>
                  <p className="text-xs text-stone-500">{new Date(inv.date).toLocaleDateString()}</p>
                </div>
              </div>
              <span className="text-sm font-medium text-stone-800">${inv.amount.toFixed(2)}</span>
            </label>
          ))}
        </div>

        <div className="border-t border-stone-200 pt-4 mb-6">
          <div className="flex justify-between items-center">
            <span className="text-sm text-stone-600">Total</span>
            <span className="text-lg font-bold text-stone-800">${selectedTotal.toFixed(2)}</span>
          </div>
        </div>

        <div className="flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm font-medium text-stone-600 hover:bg-stone-50"
          >
            Cancel
          </button>
          <button
            onClick={handlePay}
            disabled={selectedInvoices.size === 0 || isProcessing}
            className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium hover:bg-(--color-accent-hover) disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isProcessing ? "Processing..." : "Pay Now"}
          </button>
        </div>
      </div>
    </div>
  );
}

function TipModal({ onClose }: { onClose: () => void }) {
  const [tipPercent, setTipPercent] = useState<number | null>(20);
  const [customTip, setCustomTip] = useState("");
  const presets = [15, 20, 25];

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl max-w-sm w-full p-6">
        <h2 className="font-semibold text-stone-800 mb-4">Add a Tip</h2>
        <div className="flex gap-2 mb-4">
          {presets.map(pct => (
            <button
              key={pct}
              onClick={() => { setTipPercent(pct); setCustomTip(""); }}
              className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
                tipPercent === pct ? "border-(--color-accent) bg-(--color-accent-lighter) text-(--color-accent-dark)" : "border-stone-200 text-stone-600"
              }`}
            >
              {pct}%
            </button>
          ))}
          <button
            onClick={() => { setTipPercent(null); }}
            className={`flex-1 py-2 rounded-lg text-sm font-medium border ${
              tipPercent === null ? "border-(--color-accent) bg-(--color-accent-lighter) text-(--color-accent-dark)" : "border-stone-200 text-stone-600"
            }`}
          >
            Custom
          </button>
        </div>
        {tipPercent === null && (
          <input
            type="number"
            placeholder="Enter amount"
            value={customTip}
            onChange={e => setCustomTip(e.target.value)}
            className="w-full border border-stone-300 rounded-lg px-3 py-2 text-sm mb-4"
          />
        )}
        <div className="flex gap-2">
          <button onClick={onClose} className="flex-1 px-4 py-2 border border-stone-200 rounded-lg text-sm">Cancel</button>
          <button onClick={onClose} className="flex-1 px-4 py-2 bg-(--color-accent) text-white rounded-lg text-sm font-medium">Add Tip</button>
        </div>
      </div>
    </div>
  );
}