"use client";

import { useState, useEffect, useMemo } from "react";
import type { StaffPermissionTemplate } from "@/lib/api/types";
import type { StaffPayload } from "@/lib/api/staff";
import { MESSAGES, isMobile, normalizeMobile } from "@/lib/validation";

type Props = {
  template: StaffPermissionTemplate;
  initial?: Partial<StaffPayload> & { permission?: StaffPermissionTemplate };
  busy?: boolean;
  submitLabel: string;
  onSubmit: (data: StaffPayload) => Promise<void> | void;
  passwordOptional?: boolean;
};

function mergePermission(template: StaffPermissionTemplate, current: StaffPermissionTemplate | undefined): StaffPermissionTemplate {
  const merged: StaffPermissionTemplate = {};
  for (const [group, actions] of Object.entries(template)) {
    merged[group] = {};
    for (const action of Object.keys(actions)) {
      merged[group][action] = Boolean(current?.[group]?.[action]);
    }
  }
  return merged;
}

export default function StaffForm({ template, initial, busy, submitLabel, onSubmit, passwordOptional }: Props) {
  const [name, setName] = useState(initial?.name ?? "");
  const [email, setEmail] = useState(initial?.email ?? "");
  const [phone, setPhone] = useState(initial?.phone ?? "");
  const [role, setRole] = useState(initial?.role ?? "");
  const [password, setPassword] = useState("");
  const initialPerm = useMemo(() => mergePermission(template, initial?.permission), [template, initial?.permission]);
  const [perm, setPerm] = useState<StaffPermissionTemplate>(initialPerm);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    setPerm(mergePermission(template, initial?.permission));
  }, [template, initial?.permission]);

  const togglePerm = (group: string, action: string) => {
    setPerm((p) => ({ ...p, [group]: { ...p[group], [action]: !p[group][action] } }));
  };

  const setAllInGroup = (group: string, value: boolean) => {
    setPerm((p) => {
      const updated: Record<string, boolean> = {};
      for (const k of Object.keys(p[group])) updated[k] = value;
      return { ...p, [group]: updated };
    });
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErr(null);
    if (!name.trim() || !email.trim() || !phone.trim() || !role.trim()) {
      setErr("Name, email, phone and role are required.");
      return;
    }
    if (!isMobile(normalizeMobile(phone))) {
      setErr(MESSAGES.mobile);
      return;
    }
    if (!passwordOptional && !password.trim()) {
      setErr("Password is required.");
      return;
    }
    await onSubmit({
      name: name.trim(),
      email: email.trim(),
      phone: normalizeMobile(phone),
      role: role.trim(),
      permission: perm,
      password: password ? password : undefined,
    });
  };

  return (
    <form onSubmit={submit} className="space-y-6">
      {err && <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700 ring-1 ring-red-200">{err}</div>}

      <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
        <h2 className="mb-4 text-sm font-semibold text-gray-900">Profile</h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div>
            <label className="mb-1 block text-xs font-medium text-gray-600">Name *</label>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
            />
          </div>
          <div>
            <label className="mb-1 block text-xs font-medium text-gray-600">Role *</label>
            <input
              value={role}
              onChange={(e) => setRole(e.target.value)}
              placeholder="e.g. Sales Manager"
              className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
            />
          </div>
          <div>
            <label className="mb-1 block text-xs font-medium text-gray-600">Email *</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
            />
          </div>
          <div>
            <label className="mb-1 block text-xs font-medium text-gray-600">Phone *</label>
            <input
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
            />
          </div>
          <div className="sm:col-span-2">
            <label className="mb-1 block text-xs font-medium text-gray-600">
              Password {passwordOptional ? <span className="text-gray-400">(leave blank to keep current)</span> : "*"}
            </label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder={passwordOptional ? "•••••••" : "Set a password"}
              className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
            />
            {!passwordOptional && (
              <p className="mt-1 text-xs text-gray-500">Default suggestion: use the staff member’s phone number.</p>
            )}
          </div>
        </div>
      </div>

      <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
        <h2 className="mb-4 text-sm font-semibold text-gray-900">Permissions</h2>
        <div className="space-y-5">
          {Object.entries(perm).map(([group, actions]) => {
            const allOn = Object.values(actions).every(Boolean);
            return (
              <div key={group} className="rounded-lg border border-gray-100 p-4">
                <div className="mb-3 flex items-center justify-between">
                  <h3 className="text-sm font-semibold capitalize text-gray-900">{group}</h3>
                  <button
                    type="button"
                    onClick={() => setAllInGroup(group, !allOn)}
                    className="text-xs font-medium text-[#CC1414] hover:underline"
                  >
                    {allOn ? "Clear all" : "Select all"}
                  </button>
                </div>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                  {Object.entries(actions).map(([action, checked]) => (
                    <label key={action} className="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2 text-sm">
                      <input
                        type="checkbox"
                        checked={checked}
                        onChange={() => togglePerm(group, action)}
                        className="h-4 w-4 rounded border-gray-300 text-[#CC1414] focus:ring-[#CC1414]"
                      />
                      <span className="capitalize text-gray-700">{action.replace(/-/g, " ")}</span>
                    </label>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="flex justify-end">
        <button
          type="submit"
          disabled={busy}
          className="rounded-lg bg-[#CC1414] px-5 py-2 text-sm font-medium text-white hover:bg-[#a30f0f] disabled:opacity-60"
        >
          {busy ? "Saving…" : submitLabel}
        </button>
      </div>
    </form>
  );
}