"use client";

import { cn } from "@/shared/lib/utils";
import { useT } from "@/shared/i18n/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/presentation/components/ui/card";
import { HBarList } from "../grids";
import type { HealthAdoption, HealthModuleStatus } from "@/domain/entities/health";

const STATUS_COLOR: Record<HealthModuleStatus, string> = {
  active: "var(--chart-2)",
  low: "var(--chart-3)",
  unused: "var(--muted-foreground)",
  "n/a": "var(--muted-foreground)",
};

const STATUS_BADGE: Record<HealthModuleStatus, string> = {
  active: "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400",
  low: "bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400",
  unused: "bg-muted text-muted-foreground",
  "n/a": "bg-muted text-muted-foreground",
};

export function AdoptionTab({ adoption }: { adoption: HealthAdoption }) {
  const t = useT();

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">{t.health.profile.byModule}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {adoption.modules.map((m) => (
              <div key={m.key} className="flex items-center gap-3">
                <span className="w-40 shrink-0 truncate text-sm">{m.label}</span>
                <div className="flex-1 relative h-2.5 rounded-full bg-muted overflow-hidden">
                  <div
                    className="h-full rounded-full"
                    style={{ width: `${Math.max(0, Math.min(100, m.usage_pct))}%`, backgroundColor: STATUS_COLOR[m.status] }}
                  />
                  {m.scope === "per_vehicle" && m.threshold > 0 && m.threshold <= 100 && (
                    <span
                      className="absolute top-0 bottom-0 w-px bg-foreground/50"
                      style={{ left: `${m.threshold}%` }}
                      title={t.health.profile.threshold(m.threshold)}
                    />
                  )}
                </div>
                <span className="w-12 text-right text-xs font-mono tabular-nums">{Math.round(m.usage_pct)}%</span>
                <span className={cn("w-20 text-center text-[10px] font-semibold rounded-full py-0.5 px-1.5", STATUS_BADGE[m.status])}>
                  {t.health.profile.status[m.status]}
                </span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.ranking}</CardTitle>
          </CardHeader>
          <CardContent>
            <HBarList
              items={adoption.ranking.map((r, i) => ({ key: r.key, label: r.label, value: r.usage_pct, rank: i + 1 }))}
            />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.discovery}</CardTitle>
          </CardHeader>
          <CardContent>
            {adoption.discovery_timeline.length === 0 ? (
              <p className="py-6 text-center text-sm text-muted-foreground">—</p>
            ) : (
              <div className="space-y-3">
                {adoption.discovery_timeline.map((entry) => (
                  <div key={entry.month} className="flex gap-3">
                    <span className="w-16 shrink-0 text-xs font-mono text-muted-foreground pt-0.5">{entry.month}</span>
                    <div className="flex flex-wrap gap-1.5">
                      {entry.modules.map((label) => (
                        <span key={label} className="text-xs bg-muted rounded-md px-2 py-0.5">
                          + {label}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}