"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { useRouter } from "next/navigation";
import { updateTenantSettingsAction, removeTenantLogoAction, type SettingsState } from "./actions";

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang lưu…" : "Lưu cài đặt"}
    </button>
  );
}

export function SettingsForm({
  tenantName,
  taxCode,
  logoDataUrl,
  alertRevenueDropPercent,
  alertStaffMinAchievementPercent,
}: {
  tenantName: string;
  taxCode: string;
  logoDataUrl: string | null;
  alertRevenueDropPercent: number;
  alertStaffMinAchievementPercent: number;
}) {
  const [state, formAction] = useActionState<SettingsState, FormData>(updateTenantSettingsAction, {});
  const [preview, setPreview] = useState<string | null>(logoDataUrl);
  const [removing, setRemoving] = useState(false);
  const router = useRouter();

  async function handleRemoveLogo() {
    setRemoving(true);
    try {
      await removeTenantLogoAction();
      setPreview(null);
      router.refresh();
    } finally {
      setRemoving(false);
    }
  }

  return (
    <form action={formAction} className="card flex max-w-md flex-col gap-4 p-4">
      <div>
        <label htmlFor="name" className="label-caps mb-1.5 block">
          Tên công ty
        </label>
        <input id="name" name="name" type="text" required defaultValue={tenantName} className="input" />
        <p className="mt-1 text-xs text-ink-400">
          Hiển thị trên thanh điều hướng, báo cáo in và các tệp xuất Excel.
        </p>
      </div>

      <div>
        <label htmlFor="taxCode" className="label-caps mb-1.5 block">
          Mã số thuế
        </label>
        <input id="taxCode" name="taxCode" type="text" defaultValue={taxCode} className="input" placeholder="0312345678" />
      </div>

      <div>
        <label htmlFor="logo" className="label-caps mb-1.5 block">
          Logo
        </label>
        {preview && (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={preview} alt="Logo hiện tại" className="mb-2 h-14 w-14 rounded-lg border border-[var(--color-line)] object-contain" />
        )}
        <input
          id="logo"
          name="logo"
          type="file"
          accept="image/png,image/jpeg,image/webp,image/svg+xml"
          className="input"
          onChange={(e) => {
            const file = e.target.files?.[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = () => setPreview(reader.result as string);
            reader.readAsDataURL(file);
          }}
        />
        <p className="mt-1 text-xs text-ink-400">PNG, JPEG, WEBP hoặc SVG — tối đa 500KB.</p>
        {logoDataUrl && (
          <button
            type="button"
            disabled={removing}
            onClick={() => {
              void handleRemoveLogo();
            }}
            className="btn-ghost mt-2 text-xs"
          >
            {removing ? "Đang xoá…" : "Xoá logo"}
          </button>
        )}
      </div>

      <div>
        <label className="label-caps mb-1.5 block">Ngưỡng cảnh báo kinh doanh</label>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <label htmlFor="alertRevenueDropPercent" className="mb-1 block text-xs text-ink-500">
              Doanh thu giảm quá (%)
            </label>
            <input
              id="alertRevenueDropPercent"
              name="alertRevenueDropPercent"
              type="number"
              min={1}
              max={99}
              required
              defaultValue={alertRevenueDropPercent}
              className="input"
            />
          </div>
          <div>
            <label htmlFor="alertStaffMinAchievementPercent" className="mb-1 block text-xs text-ink-500">
              NVKD dưới chỉ tiêu (%)
            </label>
            <input
              id="alertStaffMinAchievementPercent"
              name="alertStaffMinAchievementPercent"
              type="number"
              min={1}
              max={99}
              required
              defaultValue={alertStaffMinAchievementPercent}
              className="input"
            />
          </div>
        </div>
        <p className="mt-1 text-xs text-ink-400">
          Hệ thống tự quét mỗi đêm, so tháng vừa đóng sổ với tháng trước đó. Vượt ngưỡng thì hiện
          ⚠️ ở mục Cảnh báo.
        </p>
      </div>

      {state.error && (
        <p role="alert" className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
          {state.error}
        </p>
      )}
      {state.ok && <p className="rounded-lg bg-ink-100 px-3 py-2 text-sm text-brand-600">{state.ok}</p>}

      <div>
        <SubmitButton />
      </div>
    </form>
  );
}