"use client";

import { useCallback, useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { GitBranch, MapPin, Pencil, Plus, Trash2, Users } from "lucide-react";
import FranchiseFormModal from "@/components/businesses/FranchiseFormModal";
import Button from "@/components/ui/Button";
import ConfirmModal from "@/components/ui/ConfirmModal";
import { useBusinessPanelAccess } from "@/hooks/useBusinessPanelAccess";

interface FranchiseRow {
  id: string;
  name: string;
  description: string | null;
  isActive: boolean;
  _count: {
    locations: number;
    members: number;
  };
}

export default function BusinessPanelFranchises() {
  const t = useTranslations("businessPanel");
  const tf = useTranslations("franchises");
  const tc = useTranslations("common");
  const { businessId, canManageFranchises } = useBusinessPanelAccess();

  const [franchises, setFranchises] = useState<FranchiseRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState<{ open: boolean; franchise: FranchiseRow | null }>({
    open: false,
    franchise: null,
  });
  const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null);
  const [deleting, setDeleting] = 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();
      setFranchises(json.franchises ?? []);
    } catch {
      setFranchises([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  async function handleDelete(id: string) {
    if (!businessId) return;
    setDeleting(true);
    try {
      await fetch(`/api/businesses/${businessId}/franchises/${id}`, { method: "DELETE" });
      setDeleteTarget(null);
      fetchData();
    } finally {
      setDeleting(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("franchisesTitle")}</h2>
          <p className="mt-1 text-sm text-[var(--text-muted)]">{t("franchisesSubtitle")}</p>
        </div>
        {canManageFranchises && (
          <Button onClick={() => setModal({ open: true, franchise: null })} className="w-full sm:w-auto">
            <Plus className="h-4 w-4" />
            {tf("addFranchise")}
          </Button>
        )}
      </div>

      {loading ? (
        <p className="text-sm text-[var(--text-muted)]">{t("loading")}</p>
      ) : franchises.length === 0 ? (
        <div className="rounded-xl border border-dashed border-[var(--border)] py-12 text-center">
          <GitBranch className="mx-auto mb-2 h-8 w-8 text-[var(--text-faint)]" />
          <p className="text-sm text-[var(--text-muted)]">{t("noFranchises")}</p>
          {canManageFranchises && (
            <Button
              variant="secondary"
              className="mt-4"
              onClick={() => setModal({ open: true, franchise: null })}
            >
              <Plus className="h-4 w-4" />
              {tf("addFranchise")}
            </Button>
          )}
        </div>
      ) : (
        <div className="space-y-2">
          {franchises.map((franchise) => (
            <div
              key={franchise.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 rounded-lg bg-sky-500/10 text-sky-400">
                <GitBranch className="h-4 w-4" />
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-medium text-[var(--text)]">{franchise.name}</span>
                  <span
                    className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${
                      franchise.isActive
                        ? "bg-emerald-500/10 text-emerald-400"
                        : "bg-[var(--bg-elevated)] text-[var(--text-muted)] ring-1 ring-[var(--border)]"
                    }`}
                  >
                    {franchise.isActive ? tc("active") : tc("inactive")}
                  </span>
                </div>
                {franchise.description && (
                  <p className="mt-0.5 truncate text-xs text-[var(--text-faint)]">
                    {franchise.description}
                  </p>
                )}
              </div>
              <div className="flex shrink-0 items-center gap-3 text-xs text-[var(--text-muted)]">
                <span className="flex items-center gap-1">
                  <MapPin className="h-3.5 w-3.5" />
                  {franchise._count.locations}
                </span>
                <span className="flex items-center gap-1">
                  <Users className="h-3.5 w-3.5" />
                  {franchise._count.members}
                </span>
              </div>
              {canManageFranchises && (
                <div className="flex shrink-0 items-center gap-1">
                  <button
                    type="button"
                    onClick={() => setModal({ open: true, franchise })}
                    className="cursor-pointer rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]"
                    aria-label={tc("edit")}
                  >
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button
                    type="button"
                    onClick={() => setDeleteTarget({ id: franchise.id, name: franchise.name })}
                    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>
          ))}
        </div>
      )}

      {modal.open && businessId && (
        <FranchiseFormModal
          businessId={businessId}
          franchise={modal.franchise}
          onSave={() => {
            setModal({ open: false, franchise: null });
            fetchData();
          }}
          onClose={() => setModal({ open: false, franchise: null })}
        />
      )}

      <ConfirmModal
        open={Boolean(deleteTarget)}
        title={tc("confirmTitle")}
        description={
          deleteTarget ? `${tf("deleteConfirm")} (${deleteTarget.name})` : tc("confirmDelete")
        }
        loading={deleting}
        onConfirm={() => deleteTarget && handleDelete(deleteTarget.id)}
        onCancel={() => !deleting && setDeleteTarget(null)}
      />
    </div>
  );
}