import { UserPlus, Shield, Headphones, Calculator, Eye, Users } from "@/components/ui/icons";
import { Panel, PanelHeader } from "@/components/ui/panel";
import { Button } from "@/components/ui/button";
import { EmptyState } from "@/components/ui/empty-state";
import {
  AGENT_ROLE_DESCRIPTIONS,
  AGENT_ROLE_LABELS,
  type AgentRole,
} from "@/lib/mock-data";
import { BRAND_NAME } from "@/lib/brand";

export default function AgencyTeamPage() {
  return (
    <div className="space-y-6">
      {/* Roles */}
      <Panel>
        <PanelHeader title="Rôles disponibles" subtitle="Définissez précisément ce que chaque membre de l'équipe peut faire" />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-border">
          <RoleCard role="admin" />
          <RoleCard role="support" />
          <RoleCard role="comptabilite" />
          <RoleCard role="lecture" />
        </div>
      </Panel>

      {/* Membres */}
      <Panel>
        <PanelHeader
          title={`Membres de l'équipe ${BRAND_NAME}`}
          subtitle="Accès à l'espace administration"
          trailing={
            <Button variant="primary" size="sm">
              <UserPlus className="size-3.5" />
              Inviter un membre
            </Button>
          }
        />
        <EmptyState
          icon={Users}
          title="Vous êtes seul pour l'instant"
          description="Invitez un collaborateur pour partager l'accès à l'espace agence."
        />
      </Panel>
    </div>
  );
}

function RoleCard({ role }: { role: AgentRole }) {
  const Icon = role === "admin" ? Shield : role === "support" ? Headphones : role === "comptabilite" ? Calculator : Eye;
  return (
    <div className="p-6">
      <span className="size-9 rounded-md bg-stone-900/[0.03] border border-border flex items-center justify-center text-text-muted">
        <Icon className="size-4" />
      </span>
      <div className="mt-4">
        <h4 className="text-sm font-semibold text-text">{AGENT_ROLE_LABELS[role]}</h4>
        <p className="mt-1.5 text-xs text-text-muted leading-relaxed">{AGENT_ROLE_DESCRIPTIONS[role]}</p>
      </div>
    </div>
  );
}