"use client";

import { use } from "react";
import Link from "next/link";
import { useServiceData } from "../../context/DataContext";
import { EndpointTable } from "../../components/EndpointTable";
import { DeadFunctionList } from "../../components/DeadFunctionList";
import { ThemeToggle } from "../../components/ThemeToggle";

export default function ServiceDetailPage({
  params,
}: {
  params: Promise<{ service: string }>;
}) {
  const { service: serviceName } = use(params);
  const service = useServiceData(serviceName);

  if (!service) {
    return (
      <div className="mx-auto max-w-7xl px-4 py-16 text-center">
        <h1 className="text-2xl font-bold text-text-primary">
          Service not found
        </h1>
        <p className="mt-2 text-text-secondary">
          No data for &quot;{serviceName}&quot;.
        </p>
        <Link href="/" className="mt-4 inline-block text-sm text-accent hover:text-accent-hover">
          Back to overview
        </Link>
      </div>
    );
  }

  const { endpoints, functions } = service;

  return (
    <div className="min-h-screen bg-background flex flex-col">
      <header className="flex items-center justify-between px-6 py-4 bg-surface border-b border-border">
        <div className="flex items-center gap-3">
          <Link
            href="/"
            className="text-sm text-text-secondary hover:text-accent"
          >
            &larr;
          </Link>
          <h1 className="text-xl font-semibold text-text-primary">
            {service.name}
          </h1>
          <span className="text-sm text-text-secondary">
            {service.framework} &middot; {service.team || "unknown team"}
            {service.repo_url && (
              <>
                {" "}&middot;{" "}
                <a
                  href={service.repo_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-accent hover:text-accent-hover"
                >
                  repo
                </a>
              </>
            )}
          </span>
        </div>
        <ThemeToggle />
      </header>

      <div className="px-6 py-6 space-y-8">
      {/* Summary row */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div className="rounded-lg border border-border bg-surface p-5">
          <div className="text-xs font-medium uppercase tracking-wider text-text-secondary mb-2">Total Endpoints</div>
          <div className="flex items-baseline gap-1 mb-3">
            <span className="text-3xl font-bold text-text-primary">{endpoints.total}</span>
          </div>
        </div>
        <div className="rounded-lg border border-border bg-surface p-5">
          <div className="text-xs font-medium uppercase tracking-wider text-text-secondary mb-2">Used</div>
          <div className="flex items-baseline gap-1 mb-3">
            <span className="text-3xl font-bold text-success">{endpoints.used.count}</span>
            <span className="text-text-secondary text-sm">/ {endpoints.total}</span>
          </div>
          <div className="w-full h-1.5 rounded-full bg-border overflow-hidden mb-1.5">
            <div className="h-full rounded-full bg-success transition-all" style={{ width: `${endpoints.used.percent}%` }} />
          </div>
          <div className="text-sm text-text-secondary">{endpoints.used.percent}% used</div>
        </div>
        <div className="rounded-lg border border-border bg-surface p-5">
          <div className="text-xs font-medium uppercase tracking-wider text-text-secondary mb-2">Unused</div>
          <div className="flex items-baseline gap-1 mb-3">
            <span className="text-3xl font-bold text-danger">{endpoints.unused.count}</span>
            <span className="text-text-secondary text-sm">/ {endpoints.total}</span>
          </div>
          <div className="w-full h-1.5 rounded-full bg-border overflow-hidden mb-1.5">
            <div className="h-full rounded-full transition-all bg-danger" style={{ width: `${endpoints.unused.percent}%` }} />
          </div>
          <div className="text-sm text-text-secondary">{endpoints.unused.percent}% unused</div>
        </div>
        <div className="rounded-lg border border-border bg-surface p-5">
          <div className="text-xs font-medium uppercase tracking-wider text-text-secondary mb-2">Dead Functions</div>
          <div className="flex items-baseline gap-1 mb-3">
            <span className="text-3xl font-bold text-warning">{functions.dead}</span>
            <span className="text-text-secondary text-sm">/ {functions.total}</span>
          </div>
          <div className="w-full h-1.5 rounded-full bg-border overflow-hidden mb-1.5">
            <div className="h-full rounded-full transition-all bg-warning" style={{ width: `${functions.dead_percent}%` }} />
          </div>
          <div className="text-sm text-text-secondary">{functions.dead_percent}% dead</div>
        </div>
      </div>

      {/* Endpoint table */}
      <section>
        <h2 className="mb-4 text-xl font-semibold text-text-primary">
          Endpoints
        </h2>
        <EndpointTable details={service.details} />
      </section>

      {/* Dead functions */}
      <section>
        <h2 className="mb-4 text-xl font-semibold text-text-primary">
          Dead Functions ({functions.dead})
        </h2>
        <div className="rounded-lg border border-border bg-surface p-5">
          <DeadFunctionList functions={service.dead_functions} />
        </div>
      </section>
      </div>
    </div>
  );
}