clienthub/src/components/phase-timeline.tsx

import type { ClientView } from '@/lib/client-view';
import { Progress } from '@/components/ui/progress';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface PhaseTimelineProps {
  phases: ClientView['phases'];
}

function PhaseStatusIcon({ status }: { status: 'upcoming' | 'active' | 'done' }) {
  if (status === 'done') {
    return (
      <svg
        className="w-5 h-5 text-[#16a34a]"
        fill="currentColor"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clipRule="evenodd"
        />
      </svg>
    );
  }
  if (status === 'active') {
    return (
      <svg
        className="w-5 h-5 text-[#0066cc]"
        fill="currentColor"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16z"
          clipRule="evenodd"
        />
      </svg>
    );
  }
  return (
    <svg
      className="w-5 h-5 text-[#999999]"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <circle cx={12} cy={12} r={9} />
    </svg>
  );
}

function TaskStatusIcon({ status }: { status: 'todo' | 'in_progress' | 'done' }) {
  if (status === 'done') {
    return (
      <svg
        className="w-4 h-4 text-[#16a34a] shrink-0 mt-0.5"
        fill="currentColor"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
          clipRule="evenodd"
        />
      </svg>
    );
  }
  if (status === 'in_progress') {
    return (
      <svg
        className="w-4 h-4 text-[#ca8a04] shrink-0 mt-0.5"
        fill="currentColor"
        viewBox="0 0 20 20"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16z"
          clipRule="evenodd"
        />
      </svg>
    );
  }
  return (
    <svg
      className="w-4 h-4 text-[#999999] shrink-0 mt-0.5"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <circle cx={12} cy={12} r={9} />
    </svg>
  );
}

const phaseStatusLabel: Record<'upcoming' | 'active' | 'done', string> = {
  upcoming: 'In arrivo',
  active: 'In corso',
  done: 'Completata',
};

const phaseStatusStyle: Record<'upcoming' | 'active' | 'done', string> = {
  upcoming: 'border-transparent bg-[#999999] text-white',
  active: 'border-transparent bg-[#0066cc] text-white',
  done: 'border-transparent bg-[#16a34a] text-white',
};

export function PhaseTimeline({ phases }: PhaseTimelineProps) {
  if (phases.length === 0) {
    return (
      <p className="text-sm text-[#999999] italic">
        Nessuna fase ancora configurata.
      </p>
    );
  }

  return (
    <div className="space-y-0">
      {phases.map((phase, index) => {
        const doneCount = phase.tasks.filter((t) => t.status === 'done').length;
        const isLast = index === phases.length - 1;

        return (
          <div key={phase.id} className="flex gap-5">
            {/* Colonna sinistra: indicatore timeline */}
            <div className="flex flex-col items-center">
              {/* Cerchio con icona stato */}
              <div className="w-10 h-10 rounded-full bg-white border-2 border-[#e5e5e5] flex items-center justify-center shrink-0 z-10">
                <PhaseStatusIcon status={phase.status} />
              </div>
              {/* Linea verticale verso la fase successiva */}
              {!isLast && (
                <div className="flex-1 w-px bg-[#e5e5e5] my-2" style={{ minHeight: '2rem' }} />
              )}
            </div>

            {/* Colonna destra: contenuto fase */}
            <div className={`flex-1 ${isLast ? 'pb-0' : 'pb-6'}`}>
              <Card className="rounded-lg border border-[#e5e5e5] bg-white shadow-none p-5">
                {/* Header fase */}
                <div className="flex items-start justify-between gap-3 mb-4">
                  <h3 className="text-base font-bold text-[#1a1a1a] leading-snug">
                    {phase.title}
                  </h3>
                  <Badge className={`text-xs shrink-0 ${phaseStatusStyle[phase.status]}`}>
                    {phaseStatusLabel[phase.status]}
                  </Badge>
                </div>

                {/* Barra progresso fase (D-08) */}
                <div className="mb-5">
                  <div className="flex justify-between items-center mb-1.5">
                    <p className="text-xs text-[#666666] font-medium">
                      {doneCount} di {phase.tasks.length} task
                    </p>
                    <p className="text-xs font-semibold text-[#1a1a1a]">
                      {phase.progress_pct}%
                    </p>
                  </div>
                  <Progress value={phase.progress_pct} className="h-1.5" />
                </div>

                {/* Lista task */}
                {phase.tasks.length === 0 ? (
                  <p className="text-xs text-[#999999] italic">
                    Nessun task ancora configurato.
                  </p>
                ) : (
                  <ul className="space-y-2">
                    {phase.tasks.map((task) => (
                      <li key={task.id} className="flex items-start gap-2.5">
                        <TaskStatusIcon status={task.status} />
                        <div className="flex-1 min-w-0">
                          <p
                            className={`text-sm leading-snug ${
                              task.status === 'done'
                                ? 'line-through text-[#999999]'
                                : 'text-[#1a1a1a]'
                            }`}
                          >
                            {task.title}
                          </p>
                          {task.description && (
                            <p className="text-xs text-[#999999] mt-0.5 leading-snug">
                              {task.description}
                            </p>
                          )}

                          {/* Deliverable annidati */}
                          {task.deliverables.length > 0 && (
                            <ul className="mt-1.5 space-y-1">
                              {task.deliverables.map((d) => (
                                <li
                                  key={d.id}
                                  className="flex items-center justify-between gap-2 bg-[#f9f9f9] rounded px-2 py-1"
                                >
                                  <span className="text-xs text-[#666666] truncate">
                                    {d.title}
                                  </span>
                                  {d.status === 'approved' && (
                                    <Badge className="text-xs border-transparent bg-[#16a34a] text-white shrink-0">
                                      Approvato
                                    </Badge>
                                  )}
                                </li>
                              ))}
                            </ul>
                          )}
                        </div>
                      </li>
                    ))}
                  </ul>
                )}
              </Card>
            </div>
          </div>
        );
      })}
    </div>
  );
}