"use client";

import { useState } from "react";
import { Wallet, ShieldCheck } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { SettingsCard } from "./settings-card";
import { SettingField } from "./setting-field";
import { SaveButton } from "./save-button";
import {
  updatePaymentSettings,
  type StoreSettingsData,
  type PaymentMethodInput,
} from "@/lib/actions/settings";

interface PaymentSettingsProps {
  settings: StoreSettingsData;
}

/**
 * Enabled payment gateways and their configuration.
 */
export function PaymentSettings({ settings }: PaymentSettingsProps) {
  const [methods, setMethods] = useState<PaymentMethodInput[]>(
    settings.paymentMethods,
  );
  const [testMode, setTestMode] = useState(settings.paymentTestMode);

  const toggleMethod = (id: string) => {
    setMethods((prev) =>
      prev.map((m) => (m.id === id ? { ...m, enabled: !m.enabled } : m)),
    );
  };

  const cod = methods.find((m) => m.id === "cod");

  return (
    <SettingsCard
      title="Payment"
      description="Choose which payment methods your customers can use."
      icon={<Wallet className="h-4 w-4" />}
      footer={
        <SaveButton
          onSave={() =>
            updatePaymentSettings({ methods, paymentTestMode: testMode })
          }
        />
      }
    >
      <div className="space-y-6">
        <ul className="space-y-2.5">
          {methods.map((method) => (
            <li
              key={method.id}
              className="flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors"
            >
              <div className="flex items-center gap-3">
                <span
                  aria-hidden
                  className={
                    method.id === "card"
                      ? "flex size-9 shrink-0 items-center justify-center rounded-md bg-sky-500/10 text-xs font-bold text-sky-700 dark:text-sky-400"
                      : "flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-xs font-bold text-primary"
                  }
                >
                  {method.id === "bkash"
                    ? "bK"
                    : method.id === "nagad"
                      ? "Ng"
                      : method.id === "card"
                        ? "V/MC"
                        : "৳"}
                </span>
                <div className="min-w-0">
                  <p className="text-sm font-medium">{method.name}</p>
                  <p className="truncate text-xs text-muted-foreground">
                    {method.description}
                  </p>
                </div>
              </div>
              <Switch
                checked={method.enabled}
                onCheckedChange={() => toggleMethod(method.id)}
                aria-label={`${method.enabled ? "Disable" : "Enable"} ${method.name}`}
              />
            </li>
          ))}
        </ul>

        <Separatorish />

        <SettingField
          id="cod-toggle"
          label="Cash on delivery"
          description="Collect payment in person when the parcel is delivered."
          controlClassName="sm:w-auto sm:shrink-0"
          control={
            <Switch
              id="cod-toggle"
              checked={cod?.enabled ?? false}
              onCheckedChange={() => toggleMethod("cod")}
            />
          }
        />

        <SettingField
          id="test-mode"
          label="Sandbox / test mode"
          description="Process payments against test credentials — never charge real customers."
          controlClassName="sm:w-auto sm:shrink-0"
          control={
            <Switch
              id="test-mode"
              checked={testMode}
              onCheckedChange={setTestMode}
            />
          }
        />

        <div className="flex items-start gap-2.5 rounded-lg border bg-muted/30 px-3.5 py-3 text-sm text-muted-foreground">
          <ShieldCheck className="mt-0.5 size-4 shrink-0" />
          <p>
            All payments are encrypted end-to-end. Live keys are managed under{" "}
            <span className="font-medium text-foreground">
              Developer settings
            </span>
            .
          </p>
        </div>
      </div>
    </SettingsCard>
  );
}

function Separatorish() {
  return <div className="h-px w-full bg-border/60" aria-hidden />;
}