"use client";

import Link from "next/link";
import { StatusChart, STATUS_COLORS, STATUS_LABELS } from "./StatusChart";
import type { ServiceData } from "../lib/types";

export function ServiceCard({ service }: { service: ServiceData }) {
  const { endpoints, functions } = service;

  const legend = [
    { key: "used", count: endpoints.used.count, pct: endpoints.used.percent },
    { key: "unused", count: endpoints.unused.count, pct: endpoints.unused.percent },
  ].filter((d) => d.count > 0);

  return (
    <Link
      href={`/${service.name}`}
      className="block rounded-lg border border-border bg-surface p-5 transition-colors hover:bg-raised"
    >
      <div className="flex items-start justify-between">
        <div>
          <h3 className="text-lg font-semibold text-text-primary">
            {service.name}
          </h3>
          <p className="text-xs text-text-secondary">
            {service.framework} &middot; {service.team || "unknown team"}
          </p>
        </div>
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-accent/15 text-accent">
          {endpoints.total} endpoints
        </span>
      </div>

      <StatusChart endpoints={endpoints} />

      <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs">
        {legend.map((item) => (
          <span key={item.key} className="flex items-center gap-1">
            <span
              className="inline-block h-2 w-2 rounded-full"
              style={{ backgroundColor: STATUS_COLORS[item.key] }}
            />
            <span className="text-text-secondary">
              {STATUS_LABELS[item.key]}: {item.count} ({item.pct}%)
            </span>
          </span>
        ))}
      </div>

      <div className="mt-3 border-t border-border pt-3">
        <p className="text-xs text-text-secondary">
          Dead functions:{" "}
          <span className="font-semibold text-warning">
            {functions.dead}
          </span>{" "}
          / {functions.total} ({functions.dead_percent}%)
        </p>
      </div>
    </Link>
  );
}