"use client";

import { useState, useCallback } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "@/i18n/navigation";
import { useSession } from "next-auth/react";
import {
  Building2, MapPin, GitBranch, Users, Shield, ArrowLeft,
  Plus, Pencil, Trash2, Star, ToggleLeft, ToggleRight, UserPlus,
} from "lucide-react";
import { formatUserName } from "@/lib/user-display";
import FranchiseFormModal from "@/components/businesses/FranchiseFormModal";
import LocationFormModal from "@/components/businesses/LocationFormModal";
import BusinessRoleFormModal from "@/components/businesses/BusinessRoleFormModal";
import BusinessFormModal from "@/components/businesses/BusinessFormModal";
import BusinessImpersonateModal from "@/components/businesses/BusinessImpersonateModal";
import ConfirmModal from "@/components/ui/ConfirmModal";
import Button from "@/components/ui/Button";

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

// ─── Types ───────────────────────────────────────────────────────────────────

interface BusinessPermission {
  id: string; name: string; module: string; action: string; description: string | null;
}
interface BusinessRole {
  id: string; name: string; description: string | null; isSystem: boolean;
  permissions: { businessPermission: BusinessPermission }[];
  _count: { businessMembers: number; franchiseMembers: number; locationStaff: number };
}
interface UserMin {
  id: string; firstName: string; lastName: string; username: string; email: string; image?: string | null;
}
interface MemberEntry {
  id: string; user: UserMin; businessRole: { id: string; name: string } | null;
}
interface Franchise {
  id: string; name: string; description: string | null; isActive: boolean;
  _count: { locations: number; members: number };
}
interface Location {
  id: string; name: string; address: string | null; city: string | null; country: string | null;
  phone: string | null; isMain: boolean; isActive: boolean; franchiseId: string | null;
  franchise: { id: string; name: string } | null;
  _count: { staff: number };
}
interface Business {
  id: string; name: string; slug: string; description: string | null; logo: string | null;
  email: string | null; phone: string | null; address: string | null; isActive: boolean;
  franchises: Franchise[]; locations: Location[]; members: MemberEntry[]; roles: BusinessRole[];
}

interface BusinessDetailProps {
  business: Business;
  allUsers: UserMin[];
  businessPermissions: BusinessPermission[];
  canUpdate: boolean;
  canDelete: boolean;
  canManageFranchises: boolean;
  canManageLocations: boolean;
  canManageRoles: boolean;
  canImpersonate: boolean;
}

type Tab = "locations" | "franchises" | "members" | "roles";

// ─── Tab: Locations ───────────────────────────────────────────────────────────

function LocationsTab({ business, franchises, canManage, onRefresh }: {
  business: Business; franchises: Franchise[]; canManage: boolean; onRefresh: () => void;
}) {
  const t = useTranslations("locations");
  const tc = useTranslations("common");
  const [modal, setModal] = useState<{ open: boolean; location: Location | null }>({ open: false, location: null });
  const [deleteTarget, setDeleteTarget] = useState<DeleteTarget | null>(null);
  const [deleting, setDeleting] = useState(false);

  const handleDelete = async (id: string) => {
    setDeleting(true);
    try {
      await fetch(`/api/businesses/${business.id}/locations/${id}`, { method: "DELETE" });
      setDeleteTarget(null);
      onRefresh();
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div className="space-y-4">
      {canManage && (
        <button onClick={() => setModal({ open: true, location: null })}
          className="flex items-center gap-2 rounded-lg bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white hover:opacity-90">
          <Plus className="h-4 w-4" /> {t("addLocation")}
        </button>
      )}
      {business.locations.length === 0 ? (
        <EmptyState icon={<MapPin className="h-8 w-8" />} label={t("noLocations")} hint={t("noLocationsHint")} />
      ) : (
        <div className="space-y-2">
          {business.locations.map((loc) => (
            <div key={loc.id} className="flex items-center gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--accent)]/10 text-[var(--accent)]">
                <MapPin 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)]">{loc.name}</span>
                  {loc.isMain && (
                    <span className="flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold text-amber-600 dark:text-amber-400">
                      <Star className="h-2.5 w-2.5" /> {t("mainLocation")}
                    </span>
                  )}
                  {loc.franchise && (
                    <span className="rounded-full bg-[var(--bg)] px-2 py-0.5 text-[10px] text-[var(--text-muted)] ring-1 ring-[var(--border)]">
                      {loc.franchise.name}
                    </span>
                  )}
                  <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${loc.isActive ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-[var(--bg)] text-[var(--text-muted)] ring-1 ring-[var(--border)]"}`}>
                    {loc.isActive ? tc("active") : tc("inactive")}
                  </span>
                </div>
                <p className="mt-0.5 text-xs text-[var(--text-muted)]">
                  {[loc.city, loc.country].filter(Boolean).join(", ") || loc.address || "—"}
                </p>
              </div>
              <div className="flex shrink-0 items-center gap-1 text-[11px] text-[var(--text-faint)]">
                <Users className="h-3.5 w-3.5" /> {loc._count.staff}
              </div>
              {canManage && (
                <div className="flex shrink-0 items-center gap-1">
                  <button onClick={() => setModal({ open: true, location: loc })} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]">
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button type="button" onClick={() => setDeleteTarget({ id: loc.id, name: loc.name })} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-red-500/10 hover:text-red-500">
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
      <ConfirmModal
        open={Boolean(deleteTarget)}
        title={tc("confirmTitle")}
        description={
          deleteTarget
            ? `${t("deleteConfirm")} (${deleteTarget.name})`
            : tc("confirmDelete")
        }
        loading={deleting}
        onConfirm={() => deleteTarget && handleDelete(deleteTarget.id)}
        onCancel={() => !deleting && setDeleteTarget(null)}
      />
      {modal.open && (
        <LocationFormModal
          businessId={business.id}
          location={modal.location}
          franchises={franchises}
          onSave={() => { setModal({ open: false, location: null }); onRefresh(); }}
          onClose={() => setModal({ open: false, location: null })}
        />
      )}
    </div>
  );
}

// ─── Tab: Franchises ──────────────────────────────────────────────────────────

function FranchisesTab({ business, canManage, onRefresh }: {
  business: Business; canManage: boolean; onRefresh: () => void;
}) {
  const t = useTranslations("franchises");
  const tc = useTranslations("common");
  const [modal, setModal] = useState<{ open: boolean; franchise: Franchise | null }>({ open: false, franchise: null });
  const [deleteTarget, setDeleteTarget] = useState<DeleteTarget | null>(null);
  const [deleting, setDeleting] = useState(false);

  const handleDelete = async (id: string) => {
    setDeleting(true);
    try {
      await fetch(`/api/businesses/${business.id}/franchises/${id}`, { method: "DELETE" });
      setDeleteTarget(null);
      onRefresh();
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div className="space-y-4">
      {canManage && (
        <button onClick={() => setModal({ open: true, franchise: null })}
          className="flex items-center gap-2 rounded-lg bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white hover:opacity-90">
          <Plus className="h-4 w-4" /> {t("addFranchise")}
        </button>
      )}
      {business.franchises.length === 0 ? (
        <EmptyState icon={<GitBranch className="h-8 w-8" />} label={t("noFranchises")} hint={t("noFranchisesHint")} />
      ) : (
        <div className="space-y-2">
          {business.franchises.map((fr) => (
            <div key={fr.id} className="flex items-center gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--accent)]/10 text-[var(--accent)]">
                <GitBranch className="h-4 w-4" />
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-[var(--text)]">{fr.name}</span>
                  <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium ${fr.isActive ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-[var(--bg)] text-[var(--text-muted)] ring-1 ring-[var(--border)]"}`}>
                    {fr.isActive ? tc("active") : tc("inactive")}
                  </span>
                </div>
                {fr.description && <p className="mt-0.5 text-xs text-[var(--text-muted)]">{fr.description}</p>}
                <div className="mt-1 flex gap-3 text-[11px] text-[var(--text-faint)]">
                  <span className="flex items-center gap-1"><MapPin className="h-3 w-3" /> {fr._count.locations}</span>
                  <span className="flex items-center gap-1"><Users className="h-3 w-3" /> {fr._count.members}</span>
                </div>
              </div>
              {canManage && (
                <div className="flex shrink-0 items-center gap-1">
                  <button onClick={() => setModal({ open: true, franchise: fr })} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]">
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button type="button" onClick={() => setDeleteTarget({ id: fr.id, name: fr.name })} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-red-500/10 hover:text-red-500">
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
      <ConfirmModal
        open={Boolean(deleteTarget)}
        title={tc("confirmTitle")}
        description={
          deleteTarget
            ? `${t("deleteConfirm")} (${deleteTarget.name})`
            : tc("confirmDelete")
        }
        loading={deleting}
        onConfirm={() => deleteTarget && handleDelete(deleteTarget.id)}
        onCancel={() => !deleting && setDeleteTarget(null)}
      />
      {modal.open && (
        <FranchiseFormModal
          businessId={business.id}
          franchise={modal.franchise}
          onSave={() => { setModal({ open: false, franchise: null }); onRefresh(); }}
          onClose={() => setModal({ open: false, franchise: null })}
        />
      )}
    </div>
  );
}

// ─── Tab: Members ─────────────────────────────────────────────────────────────

function MembersTab({ business, allUsers, canManage, onRefresh }: {
  business: Business; allUsers: UserMin[]; canManage: boolean; onRefresh: () => void;
}) {
  const t = useTranslations("businesses");
  const tc = useTranslations("common");
  const [addOpen, setAddOpen] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState("");
  const [selectedRoleId, setSelectedRoleId] = useState("");
  const [adding, setAdding] = useState(false);
  const [removeTarget, setRemoveTarget] = useState<DeleteTarget | null>(null);
  const [removing, setRemoving] = useState(false);

  const memberUserIds = new Set(business.members.map((m) => m.user.id));
  const availableUsers = allUsers.filter((u) => !memberUserIds.has(u.id));

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

  const handleRemove = async (userId: string) => {
    setRemoving(true);
    try {
      await fetch(`/api/businesses/${business.id}/members`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId }),
      });
      setRemoveTarget(null);
      onRefresh();
    } finally {
      setRemoving(false);
    }
  };

  return (
    <div className="space-y-4">
      {canManage && (
        <button onClick={() => setAddOpen(true)}
          className="flex items-center gap-2 rounded-lg bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white hover:opacity-90">
          <UserPlus className="h-4 w-4" /> {t("addMember")}
        </button>
      )}
      {business.members.length === 0 ? (
        <EmptyState icon={<Users className="h-8 w-8" />} label={t("noMembers")} hint={t("noMembersHint")} />
      ) : (
        <div className="space-y-2">
          {business.members.map((m) => (
            <div key={m.id} className="flex items-center gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-3">
              <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--accent)]/10 text-sm font-semibold text-[var(--accent)]">
                {m.user.firstName[0]}{m.user.lastName[0]}
              </div>
              <div className="min-w-0 flex-1">
                <p className="truncate font-medium text-[var(--text)]">{formatUserName(m.user)}</p>
                <p className="truncate text-xs text-[var(--text-muted)]">@{m.user.username} · {m.user.email}</p>
              </div>
              {m.businessRole && (
                <span className="shrink-0 rounded-full bg-[var(--accent)]/10 px-2.5 py-1 text-xs font-medium text-[var(--accent)]">
                  {m.businessRole.name}
                </span>
              )}
              {canManage && (
                <button
                  type="button"
                  onClick={() => setRemoveTarget({ id: m.user.id, name: formatUserName(m.user) })}
                  className="shrink-0 rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-red-500/10 hover:text-red-500"
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              )}
            </div>
          ))}
        </div>
      )}

      {addOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-sm rounded-2xl border border-[var(--border)] bg-[var(--bg-elevated)] p-6 shadow-2xl">
            <h3 className="mb-4 font-semibold text-[var(--text)]">{t("addMember")}</h3>
            <div className="space-y-3">
              <div>
                <label className="mb-1 block text-sm font-medium text-[var(--text)]">{t("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 text-sm text-[var(--text)] focus:border-[var(--accent)] focus:outline-none">
                  <option value="">{t("chooseUser")}</option>
                  {availableUsers.map((u) => (
                    <option key={u.id} value={u.id}>{formatUserName(u)} (@{u.username})</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="mb-1 block text-sm font-medium text-[var(--text)]">{t("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 text-sm text-[var(--text)] focus:border-[var(--accent)] focus:outline-none">
                  <option value="">{t("noRole")}</option>
                  {business.roles.map((r) => (
                    <option key={r.id} value={r.id}>{r.name}</option>
                  ))}
                </select>
              </div>
            </div>
            <div className="mt-4 flex justify-end gap-2">
              <button onClick={() => setAddOpen(false)} className="rounded-lg border border-[var(--border)] px-4 py-2 text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)]">{tc("cancel")}</button>
              <button onClick={handleAdd} disabled={!selectedUserId || adding}
                className="rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60">
                {adding ? tc("saving") : tc("add") ?? t("addMember")}
              </button>
            </div>
          </div>
        </div>
      )}
      <ConfirmModal
        open={Boolean(removeTarget)}
        title={tc("confirmTitle")}
        description={
          removeTarget
            ? `${t("removeMemberConfirm")} (${removeTarget.name})`
            : tc("confirmDelete")
        }
        loading={removing}
        onConfirm={() => removeTarget && handleRemove(removeTarget.id)}
        onCancel={() => !removing && setRemoveTarget(null)}
      />
    </div>
  );
}

// ─── Tab: Roles ───────────────────────────────────────────────────────────────

function RolesTab({ business, allPermissions, canManage, onRefresh }: {
  business: Business; allPermissions: BusinessPermission[]; canManage: boolean; onRefresh: () => void;
}) {
  const t = useTranslations("businessRoles");
  const tc = useTranslations("common");
  const [modal, setModal] = useState<{ open: boolean; role: BusinessRole | null }>({ open: false, role: null });
  const [deleteTarget, setDeleteTarget] = useState<DeleteTarget | null>(null);
  const [deleting, setDeleting] = useState(false);

  const handleDelete = async (id: string) => {
    setDeleting(true);
    try {
      await fetch(`/api/businesses/${business.id}/roles/${id}`, { method: "DELETE" });
      setDeleteTarget(null);
      onRefresh();
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div className="space-y-4">
      {canManage && (
        <button onClick={() => setModal({ open: true, role: null })}
          className="flex items-center gap-2 rounded-lg bg-[var(--accent)] px-3 py-2 text-sm font-medium text-white hover:opacity-90">
          <Plus className="h-4 w-4" /> {t("addRole")}
        </button>
      )}
      {business.roles.length === 0 ? (
        <EmptyState icon={<Shield className="h-8 w-8" />} label={t("noRoles")} hint={t("noRolesHint")} />
      ) : (
        <div className="space-y-2">
          {business.roles.map((role) => (
            <div key={role.id} className="flex items-center gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--accent)]/10 text-[var(--accent)]">
                <Shield className="h-4 w-4" />
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-[var(--text)]">{role.name}</span>
                  {role.isSystem && (
                    <span className="rounded-full bg-[var(--bg)] px-2 py-0.5 text-[10px] text-[var(--text-muted)] ring-1 ring-[var(--border)]">
                      {tc("system")}
                    </span>
                  )}
                </div>
                {role.description && <p className="mt-0.5 text-xs text-[var(--text-muted)]">{role.description}</p>}
                <p className="mt-1 text-[11px] text-[var(--text-faint)]">{role.permissions.length} {t("permissionsCount")}</p>
              </div>
              {canManage && !role.isSystem && (
                <div className="flex shrink-0 items-center gap-1">
                  <button onClick={() => setModal({ open: true, role })} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)]">
                    <Pencil className="h-3.5 w-3.5" />
                  </button>
                  <button type="button" onClick={() => setDeleteTarget({ id: role.id, name: role.name })} className="rounded-lg p-1.5 text-[var(--text-muted)] hover:bg-red-500/10 hover:text-red-500">
                    <Trash2 className="h-3.5 w-3.5" />
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
      <ConfirmModal
        open={Boolean(deleteTarget)}
        title={tc("confirmTitle")}
        description={
          deleteTarget
            ? `${t("deleteConfirm")} (${deleteTarget.name})`
            : tc("confirmDelete")
        }
        loading={deleting}
        onConfirm={() => deleteTarget && handleDelete(deleteTarget.id)}
        onCancel={() => !deleting && setDeleteTarget(null)}
      />
      {modal.open && (
        <BusinessRoleFormModal
          businessId={business.id}
          role={modal.role}
          allPermissions={allPermissions}
          onSave={() => { setModal({ open: false, role: null }); onRefresh(); }}
          onClose={() => setModal({ open: false, role: null })}
        />
      )}
    </div>
  );
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

function EmptyState({ icon, label, hint }: { icon: React.ReactNode; label: string; hint: string }) {
  return (
    <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] py-12 text-center">
      <div className="mx-auto mb-3 text-[var(--text-faint)]">{icon}</div>
      <p className="font-medium text-[var(--text)]">{label}</p>
      <p className="mt-1 text-sm text-[var(--text-muted)]">{hint}</p>
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────────

export default function BusinessDetail({
  business: initialBusiness,
  allUsers,
  businessPermissions,
  canUpdate,
  canDelete,
  canManageFranchises,
  canManageLocations,
  canManageRoles,
  canImpersonate,
}: BusinessDetailProps) {
  const t = useTranslations("businesses");
  const tc = useTranslations("common");
  const router = useRouter();
  const { data: session } = useSession();

  const [activeTab, setActiveTab] = useState<Tab>("locations");
  const [business, setBusiness] = useState(initialBusiness);
  const [editOpen, setEditOpen] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [impersonateOpen, setImpersonateOpen] = useState(false);

  const activeBusinessId = (session?.user as { businessContext?: { id: string } } | undefined)
    ?.businessContext?.id;
  const showImpersonate =
    canImpersonate && business.isActive && activeBusinessId !== business.id;

  const refresh = useCallback(async () => {
    try {
      const res = await fetch(`/api/businesses/${business.id}`);
      if (res.ok) {
        const data = await res.json();
        setBusiness(data);
      }
    } catch {
      // ignore
    }
  }, [business.id]);

  const handleDelete = async () => {
    setDeleting(true);
    try {
      await fetch(`/api/businesses/${business.id}`, { method: "DELETE" });
      router.push("/dashboard/businesses");
    } finally {
      setDeleting(false);
    }
  };

  const TABS: { key: Tab; label: string; icon: React.ReactNode; count: number }[] = [
    { key: "locations", label: t("tabLocations"), icon: <MapPin className="h-4 w-4" />, count: business.locations.length },
    { key: "franchises", label: t("tabFranchises"), icon: <GitBranch className="h-4 w-4" />, count: business.franchises.length },
    { key: "members", label: t("tabMembers"), icon: <Users className="h-4 w-4" />, count: business.members.length },
    { key: "roles", label: t("tabRoles"), icon: <Shield className="h-4 w-4" />, count: business.roles.length },
  ];

  return (
    <div className="space-y-6">
      {/* Back */}
      <button
        type="button"
        onClick={() => router.push("/dashboard/businesses")}
        className="flex items-center gap-2 text-sm text-[var(--text-muted)] hover:text-[var(--text)]"
      >
        <ArrowLeft className="h-4 w-4" />
        {t("backToBusinesses")}
      </button>

      {/* Header card */}
      <div className="rounded-2xl border border-[var(--border)] bg-[var(--bg-elevated)] p-6">
        <div className="flex flex-wrap items-start gap-4">
          <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-[var(--accent)]/10 text-[var(--accent)]">
            {business.logo ? (
              <img src={business.logo} alt={business.name} className="h-full w-full rounded-xl object-cover" />
            ) : (
              <Building2 className="h-7 w-7" />
            )}
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="text-xl font-semibold text-[var(--text)]">{business.name}</h1>
              <span className="rounded-full bg-[var(--bg)] px-2.5 py-0.5 text-xs text-[var(--text-muted)] ring-1 ring-[var(--border)]">/{business.slug}</span>
              <span className={`flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${business.isActive ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-[var(--bg)] text-[var(--text-muted)] ring-1 ring-[var(--border)]"}`}>
                {business.isActive ? <ToggleRight className="h-3.5 w-3.5" /> : <ToggleLeft className="h-3.5 w-3.5" />}
                {business.isActive ? tc("active") : tc("inactive")}
              </span>
            </div>
            {business.description && <p className="mt-1 text-sm text-[var(--text-muted)]">{business.description}</p>}
            <div className="mt-2 flex flex-wrap gap-4 text-xs text-[var(--text-faint)]">
              {business.email && <span>{business.email}</span>}
              {business.phone && <span>{business.phone}</span>}
              {business.address && <span>{business.address}</span>}
            </div>
          </div>
          <div className="flex shrink-0 gap-2">
            {showImpersonate && (
              <Button
                variant="secondary"
                size="sm"
                onClick={() => setImpersonateOpen(true)}
                className="border-sky-500/30 text-sky-400 hover:bg-sky-500/10 hover:text-sky-300"
              >
                <Building2 className="h-4 w-4" />
                {t("impersonate")}
              </Button>
            )}
            {canUpdate && (
              <button onClick={() => setEditOpen(true)} className="flex items-center gap-2 rounded-lg border border-[var(--border)] px-3 py-2 text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)]">
                <Pencil className="h-4 w-4" /> {tc("edit")}
              </button>
            )}
            {canDelete && (
              <button type="button" onClick={() => setDeleteOpen(true)} className="flex items-center gap-2 rounded-lg border border-red-200 px-3 py-2 text-sm text-red-500 hover:bg-red-500/10 dark:border-red-900">
                <Trash2 className="h-4 w-4" /> {tc("delete")}
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-1">
        {TABS.map((tab) => (
          <button
            key={tab.key}
            type="button"
            onClick={() => setActiveTab(tab.key)}
            className={`flex flex-1 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
              activeTab === tab.key
                ? "bg-[var(--bg-hover)] text-[var(--text)]"
                : "text-[var(--text-muted)] hover:text-[var(--text)]"
            }`}
          >
            {tab.icon}
            <span className="hidden sm:inline">{tab.label}</span>
            <span className="rounded-full bg-[var(--bg)] px-1.5 text-[10px] text-[var(--text-faint)] ring-1 ring-[var(--border)]">
              {tab.count}
            </span>
          </button>
        ))}
      </div>

      {/* Tab content */}
      <div>
        {activeTab === "locations" && (
          <LocationsTab business={business} franchises={business.franchises} canManage={canManageLocations} onRefresh={refresh} />
        )}
        {activeTab === "franchises" && (
          <FranchisesTab business={business} canManage={canManageFranchises} onRefresh={refresh} />
        )}
        {activeTab === "members" && (
          <MembersTab business={business} allUsers={allUsers} canManage={canUpdate} onRefresh={refresh} />
        )}
        {activeTab === "roles" && (
          <RolesTab business={business} allPermissions={businessPermissions} canManage={canManageRoles} onRefresh={refresh} />
        )}
      </div>

      {editOpen && (
        <BusinessFormModal
          business={business}
          onSave={() => { setEditOpen(false); refresh(); }}
          onClose={() => setEditOpen(false)}
        />
      )}

      {impersonateOpen && (
        <BusinessImpersonateModal
          business={business}
          open
          onClose={() => setImpersonateOpen(false)}
        />
      )}

      <ConfirmModal
        open={deleteOpen}
        title={tc("confirmTitle")}
        description={`${t("deleteConfirm")} (${business.name})`}
        loading={deleting}
        onConfirm={handleDelete}
        onCancel={() => !deleting && setDeleteOpen(false)}
      />
    </div>
  );
}