"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

const SMS_MAX = 160;

const DEFAULT_OTP = "Your Nizamify code is {code}. Valid 10 min.";
const DEFAULT_ORDER = "Hi {name}, order {orderNumber} created. Total Rs {total}. Thank you!";
const DEFAULT_PROCESSING =
  "Nizamifycom: order {orderNumber} is processing. It will be delivered soon. Thank you";
const DEFAULT_SHIPPED =
  "Nizamifycom: order {orderNumber} has been shipped. Track: {tracking}. Thank you";
const DEFAULT_DELIVERED = "Nizamifycom: order {orderNumber} has been delivered. Thank you";
const DEFAULT_CANCELLED = "Nizamifycom: order {orderNumber} has been cancelled. Thank you";

type ShopForm = {
  bankName: string;
  accountTitle: string;
  accountNumber: string;
  iban: string;
  branch: string;
  instructions: string;
  smsRequirePhoneVerification: boolean;
  smsOnOrderCreated: boolean;
  smsOnOrderProcessing: boolean;
  smsOnOrderShipped: boolean;
  smsOnOrderDelivered: boolean;
  smsOnOrderCancelled: boolean;
  smsOtpTemplate: string;
  smsOrderCreatedTemplate: string;
  smsOrderProcessingTemplate: string;
  smsOrderShippedTemplate: string;
  smsOrderDeliveredTemplate: string;
  smsOrderCancelledTemplate: string;
};

const EMPTY: ShopForm = {
  bankName: "",
  accountTitle: "",
  accountNumber: "",
  iban: "",
  branch: "",
  instructions: "",
  smsRequirePhoneVerification: false,
  smsOnOrderCreated: false,
  smsOnOrderProcessing: true,
  smsOnOrderShipped: true,
  smsOnOrderDelivered: true,
  smsOnOrderCancelled: true,
  smsOtpTemplate: DEFAULT_OTP,
  smsOrderCreatedTemplate: DEFAULT_ORDER,
  smsOrderProcessingTemplate: DEFAULT_PROCESSING,
  smsOrderShippedTemplate: DEFAULT_SHIPPED,
  smsOrderDeliveredTemplate: DEFAULT_DELIVERED,
  smsOrderCancelledTemplate: DEFAULT_CANCELLED,
};

function SmsCharFooter({ value }: { value: string }) {
  const n = value.length;
  const remaining = Math.max(0, SMS_MAX - n);
  const smsCount = n === 0 ? 0 : 1;
  return (
    <div className="rounded-b-md border border-t-0 bg-slate-50 px-3 py-1.5 text-center text-xs text-gray-600">
      {n} Character, {smsCount} SMS, {remaining} Remaining characters, Normal SMS
    </div>
  );
}

function SmsToggle({
  checked,
  onChange,
  title,
  description,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
  title: string;
  description: string;
}) {
  return (
    <label className="flex cursor-pointer items-start gap-2 text-sm">
      <input
        type="checkbox"
        className="mt-1"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
      />
      <span>
        <span className="font-medium">{title}</span>
        <span className="block text-gray-600">{description}</span>
      </span>
    </label>
  );
}

function SmsTemplateField({
  id,
  label,
  hint,
  value,
  onChange,
}: {
  id: string;
  label: string;
  hint: string;
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div className="grid gap-1">
      <Label htmlFor={id}>{label}</Label>
      <p className="text-xs text-gray-500">{hint}</p>
      <Textarea
        id={id}
        rows={3}
        maxLength={SMS_MAX}
        placeholder="Type SMS"
        className="rounded-b-none"
        value={value}
        onChange={(e) => onChange(e.target.value.slice(0, SMS_MAX))}
      />
      <SmsCharFooter value={value} />
    </div>
  );
}

export default function ShopBankSettingsAdmin() {
  const ready = useRequireSuperAdmin();
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [form, setForm] = useState<ShopForm>(EMPTY);

  const load = useCallback(async () => {
    try {
      const res = await DataService.get("/admin/shop-bank-settings");
      const d = res.data?.data || {};
      setForm({
        bankName: d.bankName || "",
        accountTitle: d.accountTitle || "",
        accountNumber: d.accountNumber || "",
        iban: d.iban || "",
        branch: d.branch || "",
        instructions: d.instructions || "",
        smsRequirePhoneVerification: Boolean(d.smsRequirePhoneVerification),
        smsOnOrderCreated: Boolean(d.smsOnOrderCreated),
        smsOnOrderProcessing: d.smsOnOrderProcessing !== false,
        smsOnOrderShipped: d.smsOnOrderShipped !== false,
        smsOnOrderDelivered: d.smsOnOrderDelivered !== false,
        smsOnOrderCancelled: d.smsOnOrderCancelled !== false,
        smsOtpTemplate: String(d.smsOtpTemplate || DEFAULT_OTP).slice(0, SMS_MAX),
        smsOrderCreatedTemplate: String(d.smsOrderCreatedTemplate || DEFAULT_ORDER).slice(
          0,
          SMS_MAX
        ),
        smsOrderProcessingTemplate: String(
          d.smsOrderProcessingTemplate || DEFAULT_PROCESSING
        ).slice(0, SMS_MAX),
        smsOrderShippedTemplate: String(d.smsOrderShippedTemplate || DEFAULT_SHIPPED).slice(
          0,
          SMS_MAX
        ),
        smsOrderDeliveredTemplate: String(
          d.smsOrderDeliveredTemplate || DEFAULT_DELIVERED
        ).slice(0, SMS_MAX),
        smsOrderCancelledTemplate: String(
          d.smsOrderCancelledTemplate || DEFAULT_CANCELLED
        ).slice(0, SMS_MAX),
      });
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load shop settings"));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (ready) load();
  }, [ready, load]);

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    try {
      await DataService.put("/admin/shop-bank-settings", form);
      toast.success("Shop settings saved");
      load();
    } catch (err: unknown) {
      toast.error(getApiErrorMessage(err, "Could not save"));
    } finally {
      setBusy(false);
    }
  };

  const otpPreviewHint = useMemo(() => "Placeholders: {code}", []);
  const orderPreviewHint = useMemo(
    () => "Placeholders: {orderNumber}, {total}, {name}",
    []
  );
  const statusHint = useMemo(() => "Placeholders: {orderNumber}", []);
  const shippedHint = useMemo(() => "Placeholders: {orderNumber}, {tracking}", []);

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }

  return (
    <div className="space-y-6">
      <MainTitle title="Shop settings" />
      <p className="text-sm text-gray-500">
        Bank details for checkout, plus SMS verification and order confirmation controls.
      </p>

      <form onSubmit={save} className="max-w-xl space-y-6">
        <div className="space-y-4 rounded-md border bg-white p-5">
          <h2 className="text-sm font-semibold text-slate-900">Bank transfer details</h2>
          <div className="grid gap-2">
            <Label htmlFor="bankName">Bank name</Label>
            <Input
              id="bankName"
              value={form.bankName}
              onChange={(e) => setForm((f) => ({ ...f, bankName: e.target.value }))}
              placeholder="e.g. HBL"
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="accountTitle">Account title</Label>
            <Input
              id="accountTitle"
              value={form.accountTitle}
              onChange={(e) => setForm((f) => ({ ...f, accountTitle: e.target.value }))}
              placeholder="e.g. Nizamify"
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="accountNumber">Account number</Label>
            <Input
              id="accountNumber"
              value={form.accountNumber}
              onChange={(e) => setForm((f) => ({ ...f, accountNumber: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="iban">IBAN</Label>
            <Input
              id="iban"
              value={form.iban}
              onChange={(e) => setForm((f) => ({ ...f, iban: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="branch">Branch (optional)</Label>
            <Input
              id="branch"
              value={form.branch}
              onChange={(e) => setForm((f) => ({ ...f, branch: e.target.value }))}
            />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="instructions">Instructions</Label>
            <Textarea
              id="instructions"
              rows={3}
              value={form.instructions}
              onChange={(e) => setForm((f) => ({ ...f, instructions: e.target.value }))}
              placeholder="Transfer the order total, then submit your reference or payment proof from My Account."
            />
          </div>
        </div>

        <div className="space-y-4 rounded-md border bg-white p-5">
          <h2 className="text-sm font-semibold text-slate-900">SMS notifications</h2>
          <p className="text-xs text-gray-500">
            API credentials (<code className="text-[11px]">SMS_EMAIL</code>,{" "}
            <code className="text-[11px]">SMS_API_KEY</code>, <code className="text-[11px]">SMS_MASK</code>)
            are set on the server <code className="text-[11px]">.env</code>. Messages are limited to{" "}
            {SMS_MAX} characters (1 Normal SMS).
          </p>

          <SmsToggle
            checked={form.smsRequirePhoneVerification}
            onChange={(v) => setForm((f) => ({ ...f, smsRequirePhoneVerification: v }))}
            title="Require phone OTP at checkout"
            description="Customers must verify their mobile with an SMS code before placing an order."
          />
          <SmsToggle
            checked={form.smsOnOrderCreated}
            onChange={(v) => setForm((f) => ({ ...f, smsOnOrderCreated: v }))}
            title="Send SMS when order is created"
            description="Sends an order confirmation SMS to the shipping phone after a successful order."
          />
          <SmsToggle
            checked={form.smsOnOrderProcessing}
            onChange={(v) => setForm((f) => ({ ...f, smsOnOrderProcessing: v }))}
            title="Send SMS when order is processing"
            description="Notifies the customer when admin moves the order to processing."
          />
          <SmsToggle
            checked={form.smsOnOrderShipped}
            onChange={(v) => setForm((f) => ({ ...f, smsOnOrderShipped: v }))}
            title="Send SMS when order is shipped"
            description="Includes tracking number when available."
          />
          <SmsToggle
            checked={form.smsOnOrderDelivered}
            onChange={(v) => setForm((f) => ({ ...f, smsOnOrderDelivered: v }))}
            title="Send SMS when order is delivered"
            description="Notifies the customer when the order is marked delivered."
          />
          <SmsToggle
            checked={form.smsOnOrderCancelled}
            onChange={(v) => setForm((f) => ({ ...f, smsOnOrderCancelled: v }))}
            title="Send SMS when order is cancelled"
            description="Sent on admin cancel or customer self-cancel."
          />

          <SmsTemplateField
            id="smsOtpTemplate"
            label="OTP message template"
            hint={otpPreviewHint}
            value={form.smsOtpTemplate}
            onChange={(v) => setForm((f) => ({ ...f, smsOtpTemplate: v }))}
          />
          <SmsTemplateField
            id="smsOrderCreatedTemplate"
            label="Order confirmation template"
            hint={orderPreviewHint}
            value={form.smsOrderCreatedTemplate}
            onChange={(v) => setForm((f) => ({ ...f, smsOrderCreatedTemplate: v }))}
          />
          <SmsTemplateField
            id="smsOrderProcessingTemplate"
            label="Processing template"
            hint={statusHint}
            value={form.smsOrderProcessingTemplate}
            onChange={(v) => setForm((f) => ({ ...f, smsOrderProcessingTemplate: v }))}
          />
          <SmsTemplateField
            id="smsOrderShippedTemplate"
            label="Shipped template"
            hint={shippedHint}
            value={form.smsOrderShippedTemplate}
            onChange={(v) => setForm((f) => ({ ...f, smsOrderShippedTemplate: v }))}
          />
          <SmsTemplateField
            id="smsOrderDeliveredTemplate"
            label="Delivered template"
            hint={statusHint}
            value={form.smsOrderDeliveredTemplate}
            onChange={(v) => setForm((f) => ({ ...f, smsOrderDeliveredTemplate: v }))}
          />
          <SmsTemplateField
            id="smsOrderCancelledTemplate"
            label="Cancelled template"
            hint={statusHint}
            value={form.smsOrderCancelledTemplate}
            onChange={(v) => setForm((f) => ({ ...f, smsOrderCancelledTemplate: v }))}
          />
        </div>

        <Button type="submit" disabled={busy}>
          {busy ? "Saving…" : "Save settings"}
        </Button>
      </form>
    </div>
  );
}