"use client";

import { useState } from "react";
import {
  PageHeader,
  Panel,
  AdminButton,
  StatusBadge,
  StatCard,
} from "@/components/admin/ui";
import { formatCurrency } from "@/components/admin/adminNav";

const inputClass =
  "w-full rounded-lg border border-border bg-white px-3 py-2 text-sm outline-none focus:border-accent";

type ToggleItem = { id: string; label: string; description: string; enabled: boolean; fee?: number };

export default function AdminCheckoutPage() {
  const [shippingMethods, setShippingMethods] = useState<ToggleItem[]>([
    { id: "std", label: "Standard Delivery", description: "3–5 business days", enabled: true, fee: 1500 },
    { id: "express", label: "Express Delivery", description: "1–2 business days", enabled: true, fee: 3000 },
    { id: "pickup", label: "Store Pickup", description: "Rawalpindi / Islamabad branches", enabled: true, fee: 0 },
  ]);

  const [paymentMethods, setPaymentMethods] = useState<ToggleItem[]>([
    { id: "cod", label: "COD", description: "Cash on delivery", enabled: true },
    { id: "stripe", label: "Stripe", description: "Card payments via Stripe", enabled: false },
    { id: "paypal", label: "PayPal", description: "PayPal checkout", enabled: false },
    { id: "bank", label: "Bank Transfer", description: "Manual bank deposit", enabled: true },
    { id: "jazzcash", label: "JazzCash", description: "Mobile wallet", enabled: true },
    { id: "easypaisa", label: "EasyPaisa", description: "Mobile wallet", enabled: true },
  ]);

  const [taxRules, setTaxRules] = useState({
    enabled: true,
    rate: 5,
    inclusive: false,
    label: "GST",
  });

  const [delivery, setDelivery] = useState({
    baseCharge: 1500,
    perKg: 50,
    remoteSurcharge: 500,
  });

  const [orderLimits, setOrderLimits] = useState({
    minOrder: 2000,
    maxOrder: 500000,
  });

  const [freeShipping, setFreeShipping] = useState({
    enabled: true,
    threshold: 100000,
    excludeRemote: true,
  });

  const [saved, setSaved] = useState(false);

  const toggleItem = (
    list: ToggleItem[],
    setList: (next: ToggleItem[]) => void,
    id: string,
  ) => {
    setList(list.map((item) => (item.id === id ? { ...item, enabled: !item.enabled } : item)));
  };

  const saveAll = () => {
    setSaved(true);
    window.setTimeout(() => setSaved(false), 2000);
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Checkout Settings"
        description="Configure shipping, payments, tax, delivery charges, and free-shipping rules."
        actions={
          <>
            <AdminButton onClick={saveAll}>Save Changes</AdminButton>
            {saved ? <span className="self-center text-xs text-emerald-600">Saved</span> : null}
          </>
        }
      />

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Shipping Methods" value={shippingMethods.filter((m) => m.enabled).length} />
        <StatCard label="Payment Methods" value={paymentMethods.filter((m) => m.enabled).length} tone="info" />
        <StatCard label="Tax Rate" value={`${taxRules.rate}%`} tone="warning" />
        <StatCard
          label="Free Shipping From"
          value={freeShipping.enabled ? formatCurrency(freeShipping.threshold) : "Off"}
          tone="success"
        />
      </div>

      <div className="grid gap-4 xl:grid-cols-2">
        <Panel title="Shipping Methods">
          <div className="space-y-3">
            {shippingMethods.map((method) => (
              <div key={method.id} className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border px-3 py-3">
                <div>
                  <p className="text-sm font-semibold">{method.label}</p>
                  <p className="text-xs text-muted-foreground">{method.description}</p>
                </div>
                <div className="flex items-center gap-2">
                  <input
                    type="number"
                    className="w-24 rounded-lg border border-border px-2 py-1.5 text-xs"
                    value={method.fee ?? 0}
                    onChange={(e) =>
                      setShippingMethods((prev) =>
                        prev.map((m) =>
                          m.id === method.id ? { ...m, fee: Number(e.target.value) } : m,
                        ),
                      )
                    }
                  />
                  <StatusBadge status={method.enabled ? "active" : "inactive"} />
                  <AdminButton
                    variant="secondary"
                    onClick={() => toggleItem(shippingMethods, setShippingMethods, method.id)}
                  >
                    {method.enabled ? "Disable" : "Enable"}
                  </AdminButton>
                </div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="Payment Methods" description="COD, Stripe, PayPal, Bank Transfer, JazzCash, EasyPaisa">
          <div className="space-y-3">
            {paymentMethods.map((method) => (
              <div key={method.id} className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-border px-3 py-3">
                <div>
                  <p className="text-sm font-semibold">{method.label}</p>
                  <p className="text-xs text-muted-foreground">{method.description}</p>
                </div>
                <div className="flex items-center gap-2">
                  <StatusBadge status={method.enabled ? "active" : "inactive"} />
                  <AdminButton
                    variant="secondary"
                    onClick={() => toggleItem(paymentMethods, setPaymentMethods, method.id)}
                  >
                    {method.enabled ? "Disable" : "Enable"}
                  </AdminButton>
                </div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="Tax Rules">
          <div className="space-y-3">
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={taxRules.enabled}
                onChange={(e) => setTaxRules((t) => ({ ...t, enabled: e.target.checked }))}
              />
              Enable tax calculation
            </label>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Tax Label</label>
              <input
                className={inputClass}
                value={taxRules.label}
                onChange={(e) => setTaxRules((t) => ({ ...t, label: e.target.value }))}
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Rate (%)</label>
              <input
                type="number"
                className={inputClass}
                value={taxRules.rate}
                onChange={(e) => setTaxRules((t) => ({ ...t, rate: Number(e.target.value) }))}
              />
            </div>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={taxRules.inclusive}
                onChange={(e) => setTaxRules((t) => ({ ...t, inclusive: e.target.checked }))}
              />
              Prices include tax
            </label>
          </div>
        </Panel>

        <Panel title="Delivery Charges">
          <div className="space-y-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Base Charge (PKR)</label>
              <input
                type="number"
                className={inputClass}
                value={delivery.baseCharge}
                onChange={(e) => setDelivery((d) => ({ ...d, baseCharge: Number(e.target.value) }))}
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Per kg Charge</label>
              <input
                type="number"
                className={inputClass}
                value={delivery.perKg}
                onChange={(e) => setDelivery((d) => ({ ...d, perKg: Number(e.target.value) }))}
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Remote Area Surcharge</label>
              <input
                type="number"
                className={inputClass}
                value={delivery.remoteSurcharge}
                onChange={(e) => setDelivery((d) => ({ ...d, remoteSurcharge: Number(e.target.value) }))}
              />
            </div>
          </div>
        </Panel>

        <Panel title="Min / Max Order">
          <div className="space-y-3">
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Minimum Order (PKR)</label>
              <input
                type="number"
                className={inputClass}
                value={orderLimits.minOrder}
                onChange={(e) => setOrderLimits((o) => ({ ...o, minOrder: Number(e.target.value) }))}
              />
            </div>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Maximum Order (PKR)</label>
              <input
                type="number"
                className={inputClass}
                value={orderLimits.maxOrder}
                onChange={(e) => setOrderLimits((o) => ({ ...o, maxOrder: Number(e.target.value) }))}
              />
            </div>
          </div>
        </Panel>

        <Panel title="Free Shipping Rules">
          <div className="space-y-3">
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={freeShipping.enabled}
                onChange={(e) => setFreeShipping((f) => ({ ...f, enabled: e.target.checked }))}
              />
              Enable free shipping
            </label>
            <div>
              <label className="mb-1 block text-xs font-semibold text-muted-foreground">Threshold (PKR)</label>
              <input
                type="number"
                className={inputClass}
                value={freeShipping.threshold}
                onChange={(e) => setFreeShipping((f) => ({ ...f, threshold: Number(e.target.value) }))}
                disabled={!freeShipping.enabled}
              />
            </div>
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={freeShipping.excludeRemote}
                onChange={(e) => setFreeShipping((f) => ({ ...f, excludeRemote: e.target.checked }))}
                disabled={!freeShipping.enabled}
              />
              Exclude remote areas
            </label>
          </div>
        </Panel>
      </div>
    </div>
  );
}