import { AlertTriangle, CheckCircle2 } from "lucide-react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { IntegrationReadinessRow } from "@/lib/operational-readiness";

type OperationsReadinessProps = {
  rows: IntegrationReadinessRow[];
};

export function OperationsReadiness({ rows }: OperationsReadinessProps) {
  return (
    <section className="space-y-4">
      <header className="border-b pb-3">
        <p className="text-sm text-muted-foreground">MVP-Betrieb</p>
        <h1 className="mt-2 text-3xl font-semibold tracking-normal">
          Einstellungen
        </h1>
      </header>

      <Card>
        <CardHeader>
          <CardTitle>Integrationsstatus</CardTitle>
          <CardDescription>
            Diese Übersicht zeigt nur fehlende Variablennamen der Next.js-Runtime.
            Convex-Action-Env bitte zusätzlich über Run-Events oder CLI prüfen.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 md:grid-cols-2">
          {rows.map((row) => {
            const isConfigured = row.status === "configured";
            const Icon = isConfigured ? CheckCircle2 : AlertTriangle;

            return (
              <article className="rounded-lg border p-4" key={row.id}>
                <div className="flex items-start gap-3">
                  <Icon
                    aria-hidden
                    className={isConfigured ? "mt-0.5 size-5 text-emerald-600" : "mt-0.5 size-5 text-amber-600"}
                  />
                  <div className="min-w-0">
                    <h2 className="text-base font-semibold">{row.label}</h2>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {isConfigured ? "Konfiguration vorhanden" : "Konfiguration fehlt"}
                    </p>
                    {row.missingEnv.length > 0 ? (
                      <p className="mt-2 break-words text-xs text-muted-foreground">
                        Fehlend: {row.missingEnv.join(", ")}
                      </p>
                    ) : null}
                    <p className="mt-2 text-xs text-muted-foreground">
                      {row.errorSurface}
                    </p>
                  </div>
                </div>
              </article>
            );
          })}
        </CardContent>
      </Card>
    </section>
  );
}