"use client";

import { useState, useEffect, useCallback } from "react";
import { useTranslations, useFormatter } from "next-intl";
import { Card } from "@/components/ui/card";
import { StatusBadge } from "@/components/ui/status-badge";
import { formatDateTime, formatRelative } from "@/lib/format";

interface RequestSummary {
  id: string;
  instanceName?: string | null;
  agentName: string;
  packages: string[];
  status: string;
  adminNotes?: string;
  tenantName?: string;
  createdAt?: string;
  updatedAt?: string;
}

interface TenantSummary {
  name: string;
  displayName: string;
  phase: string;
  conditions: Array<{
    type: string;
    status: string;
    reason?: string;
    message?: string;
    lastTransitionTime?: string;
  }>;
}

interface SingleRequestState {
  request: RequestSummary;
  tenant: TenantSummary | null;
}

/**
 * ProvisioningStatus
 *
 * Polls /api/onboarding?id=<requestId> every 5s until the request reaches
 * a terminal state. Slice 3: takes a `requestId` prop so multiple of these
 * can render on the same dashboard for different in-flight requests.
 *
 * The pre-Slice-3 version polled /api/onboarding with no params and
 * assumed one-request-per-org — that endpoint shape is gone now.
 */
export function ProvisioningStatus({ requestId }: { requestId: string }) {
  const t = useTranslations("onboarding");
  const f = useFormatter();
  const [data, setData] = useState<SingleRequestState | null>(null);
  const [error, setError] = useState("");

  const poll = useCallback(async () => {
    try {
      const res = await fetch(
        `/api/onboarding?id=${encodeURIComponent(requestId)}`
      );
      if (!res.ok) throw new Error("Failed to fetch status");
      const json = await res.json();
      setData(json);
    } catch (err: any) {
      setError(err.message);
    }
  }, [requestId]);

  useEffect(() => {
    poll();

    const status = data?.request?.status;
    const phase = data?.tenant?.phase;
    const terminal =
      status === "rejected" ||
      status === "active" ||
      phase === "Ready" ||
      phase === "Running";

    if (terminal) return;

    const interval = setInterval(poll, 5000);
    return () => clearInterval(interval);
  }, [poll, data?.request?.status, data?.tenant?.phase]);

  if (error) {
    return (
      <Card>
        <div className="text-xs text-red-400">{error}</div>
      </Card>
    );
  }

  if (!data) {
    return (
      <Card>
        <div className="flex items-center gap-2 text-sm text-text-muted">
          <div className="h-4 w-4 border-2 border-accent border-t-transparent rounded-full animate-spin" />
          {t("loading")}
        </div>
      </Card>
    );
  }

  const status = data.request.status;
  const label =
    data.request.instanceName ||
    data.request.tenantName ||
    data.request.agentName;

  // Pending admin approval
  if (status === "pending") {
    return (
      <Card className="animate-in">
        <div className="text-center py-6">
          <div className="h-14 w-14 rounded-xl bg-amber-500/15 flex items-center justify-center mx-auto mb-4">
            <svg
              className="h-7 w-7 text-amber-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={1.5}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
            {t("pendingTitle")}
          </h2>
          {label && (
            <p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
          )}
          <p className="text-sm text-text-secondary max-w-sm mx-auto">
            {t("pendingDescription")}
          </p>
          {data.request.createdAt && (
            <p
              className="text-xs text-text-muted mt-4"
              title={formatDateTime(data.request.createdAt, f)}
            >
              {t("submittedAt")}{" "}
              <span className="text-text-secondary">
                {formatRelative(data.request.createdAt, f)}
              </span>{" "}
              <span className="text-text-muted/60">
                ({formatDateTime(data.request.createdAt, f)})
              </span>
            </p>
          )}
        </div>
      </Card>
    );
  }

  // Rejected
  if (status === "rejected") {
    return (
      <Card className="animate-in">
        <div className="text-center py-6">
          <div className="h-14 w-14 rounded-xl bg-red-500/15 flex items-center justify-center mx-auto mb-4">
            <svg
              className="h-7 w-7 text-red-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={1.5}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </div>
          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
            {t("rejectedTitle")}
          </h2>
          {label && (
            <p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
          )}
          <p className="text-sm text-text-secondary max-w-sm mx-auto">
            {t("rejectedDescription")}
          </p>
          {data.request.adminNotes && (
            <p className="text-xs text-text-muted mt-3 bg-surface-2 border border-border rounded-lg p-3 max-w-sm mx-auto">
              {data.request.adminNotes}
            </p>
          )}
        </div>
      </Card>
    );
  }

  // Provisioning in progress (status approved/provisioning, optionally with tenant phase < Ready)
  if (
    status === "approved" ||
    status === "provisioning" ||
    (status === "active" && data.tenant && data.tenant.phase !== "Ready")
  ) {
    const phase = data.tenant?.phase ?? "Pending";
    const conditions = data.tenant?.conditions ?? [];

    return (
      <Card className="animate-in">
        <div className="text-center py-4 mb-4">
          <div className="h-14 w-14 rounded-xl bg-accent/15 flex items-center justify-center mx-auto mb-4">
            <div className="h-6 w-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
          </div>
          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
            {t("provisioningTitle")}
          </h2>
          {label && (
            <p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
          )}
          <p className="text-sm text-text-secondary">
            {t("provisioningDescription")}
          </p>
        </div>

        <div className="space-y-2">
          <div className="flex items-center justify-between bg-surface-2 border border-border rounded-lg px-4 py-2">
            <span className="text-xs text-text-muted">{t("phase")}</span>
            <StatusBadge phase={phase} />
          </div>
          {conditions.map((c, i) => (
            <div
              key={i}
              className="flex items-center justify-between bg-surface-2 border border-border rounded-lg px-4 py-2"
            >
              <span className="text-xs text-text-muted">{c.type}</span>
              <span
                className={`text-xs font-mono ${
                  c.status === "True"
                    ? "text-emerald-400"
                    : c.status === "False"
                    ? "text-red-400"
                    : "text-text-muted"
                }`}
              >
                {c.reason || c.status}
              </span>
            </div>
          ))}
        </div>
      </Card>
    );
  }

  // Active / Ready
  if (status === "active") {
    return (
      <Card className="animate-in">
        <div className="text-center py-6">
          <div className="h-14 w-14 rounded-xl bg-emerald-500/15 flex items-center justify-center mx-auto mb-4">
            <svg
              className="h-7 w-7 text-emerald-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
            {t("readyTitle")}
          </h2>
          {label && (
            <p className="text-xs font-mono text-text-secondary mb-2">{label}</p>
          )}
          <p className="text-sm text-text-secondary max-w-sm mx-auto mb-4">
            {t("readyDescription")}
          </p>
          <button
            onClick={() => window.location.reload()}
            className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
          >
            {t("goToDashboard")}
          </button>
        </div>
      </Card>
    );
  }

  return null;
}