import type { TacticCoverage } from "../types/models";

interface TacticCoverageChartProps {
  data: TacticCoverage[];
}

export default function TacticCoverageChart({ data }: TacticCoverageChartProps) {
  if (data.length === 0) {
    return (
      <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
        <p className="text-center text-gray-400">No tactic data available</p>
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
      <h2 className="mb-4 text-lg font-semibold text-white">Coverage by Tactic</h2>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="border-b border-gray-800">
              <th className="pb-3 pr-4 font-medium text-gray-400">Tactic</th>
              <th className="pb-3 px-4 text-center font-medium text-gray-400">Total</th>
              <th className="pb-3 px-4 text-center font-medium text-green-400">Validated</th>
              <th className="pb-3 px-4 text-center font-medium text-yellow-400">Partial</th>
              <th className="pb-3 px-4 text-center font-medium text-blue-400">In Progress</th>
              <th className="pb-3 px-4 text-center font-medium text-red-400">Not Covered</th>
              <th className="pb-3 px-4 text-center font-medium text-gray-500">Not Evaluated</th>
              <th className="pb-3 pl-4 font-medium text-gray-400">Coverage</th>
            </tr>
          </thead>
          <tbody>
            {data.map((tactic) => {
              const coveragePercent =
                tactic.total > 0
                  ? ((tactic.validated + tactic.partial) / tactic.total) * 100
                  : 0;

              return (
                <tr
                  key={tactic.tactic}
                  className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
                >
                  <td className="py-3 pr-4">
                    <span className="font-medium text-white capitalize">
                      {tactic.tactic.replace(/-/g, " ")}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-center text-gray-300">{tactic.total}</td>
                  <td className="py-3 px-4 text-center">
                    <span className={tactic.validated > 0 ? "text-green-400 font-medium" : "text-gray-600"}>
                      {tactic.validated}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <span className={tactic.partial > 0 ? "text-yellow-400 font-medium" : "text-gray-600"}>
                      {tactic.partial}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <span className={tactic.in_progress > 0 ? "text-blue-400 font-medium" : "text-gray-600"}>
                      {tactic.in_progress}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <span className={tactic.not_covered > 0 ? "text-red-400 font-medium" : "text-gray-600"}>
                      {tactic.not_covered}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-center">
                    <span className={tactic.not_evaluated > 0 ? "text-gray-400" : "text-gray-600"}>
                      {tactic.not_evaluated}
                    </span>
                  </td>
                  <td className="py-3 pl-4">
                    <div className="flex items-center gap-2">
                      <div className="h-2 w-24 overflow-hidden rounded-full bg-gray-700">
                        <div
                          className="h-full rounded-full bg-gradient-to-r from-green-500 to-green-400"
                          style={{ width: `${coveragePercent}%` }}
                        />
                      </div>
                      <span className="text-xs text-gray-400 w-12">
                        {coveragePercent.toFixed(0)}%
                      </span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
