"use client";

import { CheckCircle, XCircle } from "lucide-react";

type CellValue = string | boolean;

interface BenchmarkRow {
  label: string;
  values: CellValue[];
}

const columns = ["LLMHosts Local", "LLMHosts + Cloud", "RunPod", "Together.ai"];

const rows: BenchmarkRow[] = [
  { label: "Cost per 1M tokens", values: ["$0", "~$0.15", "$0.30", "$0.20"] },
  { label: "Setup time", values: ["5 min", "5 min", "20 min", "API key only"] },
  { label: "Data stays local", values: [true, true, false, false] },
  { label: "Automatic failover", values: [true, true, "Manual", "N/A"] },
  { label: "OpenAI-compatible", values: [true, true, "Partial", true] },
  { label: "Free tier", values: ["Unlimited", true, false, "Limited"] },
];

function CellContent({ value }: { value: CellValue }) {
  if (value === true) {
    return <CheckCircle className="text-violet-400 mx-auto" size={16} aria-label="Yes" />;
  }
  if (value === false) {
    return <XCircle className="text-gray-500 mx-auto" size={16} aria-label="No" />;
  }
  return <span>{value}</span>;
}

export function BenchmarkTable() {
  return (
    <div className="glass rounded-xl border border-white/10 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-white/[0.06]">
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" />
              {columns.map((col, i) => (
                <th
                  key={col}
                  className={`px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider ${
                    i < 2
                      ? "bg-violet-500/10 text-violet-300"
                      : "text-gray-400"
                  }`}
                >
                  {col}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr
                key={row.label}
                className="border-b border-white/[0.04] last:border-0"
              >
                <td className="px-4 py-3 text-gray-300 font-medium whitespace-nowrap">
                  {row.label}
                </td>
                {row.values.map((value, i) => (
                  <td
                    key={`${row.label}-${i}`}
                    className={`px-4 py-3 text-center whitespace-nowrap ${
                      i < 2
                        ? "bg-violet-500/[0.04] text-gray-200"
                        : "text-gray-400"
                    }`}
                  >
                    <CellContent value={value} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="border-t border-white/[0.06] px-4 py-2.5">
        <p className="text-xs text-gray-500">
          * Rates based on public pricing as of Feb 2026. Local costs = electricity only.
        </p>
      </div>
    </div>
  );
}
