import type { ComparisonRow } from "@/lib/proposal/schema";
import type { AssembledProposal } from "@/lib/proposal/assemble";

type Props = {
  matrix: ComparisonRow[];
  tiers: AssembledProposal["offer"]["tiers"];
};

export function ComparisonMatrixSection({ matrix, tiers }: Props) {
  const tierLetters = tiers.map((t) => t.tierLetter);

  return (
    <div className="h-full flex flex-col justify-center px-16 py-24 space-y-8">
      <div>
        <p className="text-xs font-mono tracking-widest text-muted-foreground uppercase">Riepilogo del lavoro</p>
        <h2 className="text-5xl font-light text-foreground mt-4">
          Le voci che <span className="text-primary">compongono</span> ogni opzione.
        </h2>
      </div>

      <div className="border border-border rounded-xl overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-muted border-b border-border">
            <tr>
              <th className="px-6 py-4 text-left font-mono text-xs tracking-widest text-muted-foreground uppercase">
                Componente del lavoro
              </th>
              {tierLetters.map((l) => (
                <th key={l} className="px-6 py-4 text-center font-mono text-xs tracking-widest text-muted-foreground uppercase w-24">
                  {l}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {matrix.map((row, i) => {
              const values = [row.inA, row.inB, row.inC];
              return (
                <tr key={i} className="hover:bg-muted/30 transition-colors">
                  <td className="px-6 py-4">
                    <p className="font-medium text-foreground">{row.component}</p>
                    <p className="text-xs text-muted-foreground mt-0.5">{row.description}</p>
                  </td>
                  {values.slice(0, tierLetters.length).map((included, j) => (
                    <td key={j} className="px-6 py-4 text-center">
                      {included ? (
                        <span className="inline-block w-3 h-3 rounded-full bg-primary" />
                      ) : (
                        <span className="inline-block w-3 h-3 rounded-full border-2 border-border" />
                      )}
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <p className="text-xs font-mono text-muted-foreground">
        Le tre opzioni si compongono progressivamente. La C eredita tutto da B, che a sua volta eredita tutto da A.
      </p>
    </div>
  );
}
