"use client";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { PoleBadge } from "@/components/pole-badge";

type Person = {
  id: string;
  name: string;
  initials: string;
  role: string;
  poles: string[];
  contract: string;
  nonWorkingDays: string;
  target: string;
  skills?: string;
  canLeadProject?: boolean;
  teamStatus?: string;
  contractStatus?: string;
  projects: string[];
  load: number;
  availability: string;
};

export function PeopleCapacityView({ people }: { people: Person[] }) {
  return (
    <section className="w-full px-3 py-4 lg:px-5">
      <div className="grid gap-3 lg:grid-cols-2 2xl:grid-cols-3">
        {people.map((person) => (
          <Card key={person.id} className="overflow-hidden">
            <CardHeader className="px-3 py-3">
              <div className="flex items-start justify-between gap-3">
                <div className="flex min-w-0 items-center gap-3">
                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-primary-foreground">
                    {person.initials}
                  </div>
                  <div className="min-w-0">
                    <h2 className="truncate text-sm font-semibold">{person.name}</h2>
                    <p className="truncate text-xs text-muted-foreground">{person.role}</p>
                  </div>
                </div>
                <Badge tone={person.load > 100 ? "red" : person.load > 90 ? "orange" : "green"}>
                  {person.load}%
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-3 p-3">
              <div className="flex flex-wrap gap-2">
                {person.poles.map((pole) => (
                  <PoleBadge key={pole} pole={pole} />
                ))}
              </div>
              <div className="grid gap-2 text-sm sm:grid-cols-2">
                <Info label="Contrat" value={person.contract} />
                <Info label="Jour off" value={person.nonWorkingDays} />
                <Info label="Statut" value={[person.teamStatus, person.contractStatus].filter(Boolean).join(" / ") || "-"} />
                <Info label="CP" value={person.canLeadProject ? "Oui" : "Non"} />
              </div>
              <div>
                <div className="mb-2 flex items-center justify-between gap-2">
                  <h3 className="text-sm font-semibold text-primary">Projets attribués</h3>
                  <span className="text-xs font-semibold text-muted-foreground">{person.projects.length}</span>
                </div>
                <div className="space-y-1.5">
                  {person.projects.map((project, index) => (
                    <div key={`${project}-${index}`} className="rounded-sm border border-border bg-muted/50 px-2 py-2 text-xs font-medium text-primary">
                      {project}
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

function Info({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between gap-3 rounded-sm bg-muted/40 px-2 py-1.5 text-sm">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-medium">{value}</span>
    </div>
  );
}