import { useState } from "react";
import { toast } from "sonner";
import { CreditCard, Sparkles } from "lucide-react";
import { useAppSettings, useUpdateSetting } from "@/lib/settings";

function Toggle({
  label,
  hint,
  checked,
  onChange,
  icon,
}: {
  label: string;
  hint: string;
  checked: boolean;
  onChange: (v: boolean) => void;
  icon: React.ReactNode;
}) {
  return (
    <label className="flex items-start justify-between gap-4 rounded-2xl border border-border/60 bg-card p-4 shadow-card">
      <span>
        <span className="flex items-center gap-2 text-sm font-semibold">
          {icon} {label}
        </span>
        <span className="mt-1 block text-xs text-muted-foreground">{hint}</span>
      </span>
      <input
        type="checkbox"
        className="mt-1 h-5 w-5 accent-[var(--color-primary)]"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
      />
    </label>
  );
}

export function SettingsPanel() {
  const { settings } = useAppSettings();
  const update = useUpdateSetting();
  const [price, setPrice] = useState(String(settings.ai_scan_price_ngn));

  async function set(key: "payments_enabled" | "ai_scan_free" | "ai_scan_price_ngn", value: boolean | number) {
    try {
      await update(key, value);
      toast.success("Settings saved.");
    } catch {
      toast.error("Could not save settings.");
    }
  }

  return (
    <div className="mt-4 space-y-3">
      <Toggle
        icon={<CreditCard className="h-4 w-4 text-primary" />}
        label="Payments enabled"
        hint="Master switch for the payment module. Turn off to let every paid feature run free."
        checked={settings.payments_enabled}
        onChange={(v) => set("payments_enabled", v)}
      />
      <Toggle
        icon={<Sparkles className="h-4 w-4 text-primary" />}
        label="AI mold check free (testing mode)"
        hint="Customers see a 'Free for now (Testing Mode)' badge and can scan without paying."
        checked={settings.ai_scan_free}
        onChange={(v) => set("ai_scan_free", v)}
      />
      <div className="rounded-2xl border border-border/60 bg-card p-4 shadow-card">
        <p className="text-sm font-semibold">AI mold check price (₦)</p>
        <p className="mt-1 text-xs text-muted-foreground">
          Charged per analysis once payments are enabled and free testing mode is off.
        </p>
        <div className="mt-3 flex gap-2">
          <input
            type="number"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
            className="w-full rounded-xl border border-input bg-background px-3 py-2.5 text-sm"
          />
          <button
            onClick={() => set("ai_scan_price_ngn", Number(price) || 0)}
            className="rounded-xl bg-brand px-4 py-2.5 text-xs font-semibold text-primary-foreground"
          >
            Save
          </button>
        </div>
      </div>
      <p className="rounded-2xl bg-muted p-4 text-xs text-muted-foreground">
        Current state:{" "}
        <strong>
          {settings.payments_enabled && !settings.ai_scan_free
            ? `AI checks cost ₦${settings.ai_scan_price_ngn}`
            : "AI checks are free"}
        </strong>
        . Nothing in the payment module is removed — flipping these switches is all that is needed to start charging again.
      </p>
    </div>
  );
}