"use client";

import { useCallback, useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { Trash2, UserCircle, UserPlus, Users } from "lucide-react";
import Button from "@/components/ui/Button";
import ConfirmModal from "@/components/ui/ConfirmModal";
import Modal from "@/components/ui/Modal";
import { useBusinessPanelAccess } from "@/hooks/useBusinessPanelAccess";
import { formatUserName } from "@/lib/user-display";

interface UserOption {
  id: string;
  firstName: string;
  lastName: string;
  username: string;
  email: string;
}

interface RoleOption {
  id: string;
  name: string;
}

interface StaffRow {
  id: string;
  user: {
    id: string;
    firstName: string;
    lastName: string;
    email: string;
    image: string | null;
  };
  businessRole: { id: string; name: string } | null;
}

export default function BusinessPanelStaff() {
  const t = useTranslations("businessPanel");
  const tb = useTranslations("businesses");
  const tc = useTranslations("common");
  const { businessId, canManageStaff } = useBusinessPanelAccess();

  const [members, setMembers] = useState<StaffRow[]>([]);
  const [roles, setRoles] = useState<RoleOption[]>([]);
  const [candidateUsers, setCandidateUsers] = useState<UserOption[]>([]);
  const [loading, setLoading] = useState(true);
  const [addOpen, setAddOpen] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState("");
  const [selectedRoleId, setSelectedRoleId] = useState("");
  const [adding, setAdding] = useState(false);
  const [removeTarget, setRemoveTarget] = useState<{ id: string; name: string } | null>(null);
  const [removing, setRemoving] = useState(false);

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/business-panel");
      if (!res.ok) throw new Error("Failed");
      const json = await res.json();
      setMembers(json.members ?? []);
      setRoles(
        (json.roles ?? []).map((role: { id: string; name: string }) => ({
          id: role.id,
          name: role.name,
        }))
      );
      setCandidateUsers(json.candidateUsers ?? []);
    } catch {
      setMembers([]);
      setRoles([]);
      setCandidateUsers([]);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  async function handleAdd() {
    if (!businessId || !selectedUserId) return;
    setAdding(true);
    try {
      const res = await fetch(`/api/businesses/${businessId}/members`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userId: selectedUserId,
          businessRoleId: selectedRoleId || null,
        }),
      });
      if (!res.ok) return;
      setAddOpen(false);
      setSelectedUserId("");
      setSelectedRoleId("");
      fetchData();
    } finally {
      setAdding(false);
    }
  }

  async function handleRemove(userId: string) {
    if (!businessId) return;
    setRemoving(true);
    try {
      await fetch(`/api/businesses/${businessId}/members`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId }),
      });
      setRemoveTarget(null);
      fetchData();
    } finally {
      setRemoving(false);
    }
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h2 className="text-lg font-semibold text-[var(--text)]">{t("staffTitle")}</h2>
          <p className="mt-1 text-sm text-[var(--text-muted)]">{t("staffSubtitle")}</p>
        </div>
        {canManageStaff && (
          <Button onClick={() => setAddOpen(true)} className="w-full sm:w-auto">
            <UserPlus className="h-4 w-4" />
            {tb("addMember")}
          </Button>
        )}
      </div>

      {loading ? (
        <p className="text-sm text-[var(--text-muted)]">{t("loading")}</p>
      ) : members.length === 0 ? (
        <div className="rounded-xl border border-dashed border-[var(--border)] py-12 text-center">
          <Users className="mx-auto mb-2 h-8 w-8 text-[var(--text-faint)]" />
          <p className="text-sm text-[var(--text-muted)]">{t("noStaff")}</p>
          {canManageStaff && (
            <Button variant="secondary" className="mt-4" onClick={() => setAddOpen(true)}>
              <UserPlus className="h-4 w-4" />
              {tb("addMember")}
            </Button>
          )}
        </div>
      ) : (
        <div className="space-y-2">
          {members.map((member) => (
            <div
              key={member.id}
              className="flex items-center gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg)]/40 p-4"
            >
              <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--bg-elevated)] ring-1 ring-[var(--border)]">
                {member.user.image ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={member.user.image} alt="" className="h-full w-full object-cover" />
                ) : (
                  <UserCircle className="h-5 w-5 text-[var(--text-faint)]" />
                )}
              </div>
              <div className="min-w-0 flex-1">
                <p className="font-medium text-[var(--text)]">
                  {member.user.firstName} {member.user.lastName}
                </p>
                <p className="truncate text-xs text-[var(--text-faint)]">{member.user.email}</p>
              </div>
              <span className="rounded-full bg-[var(--bg-elevated)] px-2.5 py-1 text-[11px] text-[var(--text-muted)] ring-1 ring-[var(--border)]">
                {member.businessRole?.name ?? t("noRole")}
              </span>
              {canManageStaff && (
                <button
                  type="button"
                  onClick={() =>
                    setRemoveTarget({
                      id: member.user.id,
                      name: formatUserName(member.user),
                    })
                  }
                  className="cursor-pointer rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-red-500/10 hover:text-red-500"
                  aria-label={tc("delete")}
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              )}
            </div>
          ))}
        </div>
      )}

      {addOpen && (
        <Modal onClose={() => !adding && setAddOpen(false)} title={tb("addMember")}>
        <div className="space-y-3">
          <div className="space-y-1.5">
            <label className="text-sm font-medium text-[var(--text)]">{tb("selectUser")}</label>
            <select
              value={selectedUserId}
              onChange={(e) => setSelectedUserId(e.target.value)}
              className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-2.5 text-sm text-[var(--text)] focus:border-[var(--accent)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40"
            >
              <option value="">{tb("chooseUser")}</option>
              {candidateUsers.map((user) => (
                <option key={user.id} value={user.id}>
                  {formatUserName(user)} (@{user.username})
                </option>
              ))}
            </select>
          </div>
          <div className="space-y-1.5">
            <label className="text-sm font-medium text-[var(--text)]">{tb("selectRole")}</label>
            <select
              value={selectedRoleId}
              onChange={(e) => setSelectedRoleId(e.target.value)}
              className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-2.5 text-sm text-[var(--text)] focus:border-[var(--accent)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40"
            >
              <option value="">{tb("noRole")}</option>
              {roles.map((role) => (
                <option key={role.id} value={role.id}>
                  {role.name}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="mt-5 flex justify-end gap-2">
          <Button variant="secondary" onClick={() => setAddOpen(false)} disabled={adding}>
            {tc("cancel")}
          </Button>
          <Button onClick={handleAdd} disabled={!selectedUserId || adding}>
            {adding ? tc("saving") : tb("addMember")}
          </Button>
        </div>
      </Modal>
      )}

      <ConfirmModal
        open={Boolean(removeTarget)}
        title={tc("confirmTitle")}
        description={
          removeTarget
            ? `${tb("removeMemberConfirm")} (${removeTarget.name})`
            : tc("confirmDelete")
        }
        loading={removing}
        onConfirm={() => removeTarget && handleRemove(removeTarget.id)}
        onCancel={() => !removing && setRemoveTarget(null)}
      />
    </div>
  );
}