import type {
  ProviderReadinessCheckRecord,
  ProviderReadinessSummaryRecord,
} from "../../types/provider";
import { readinessRecommendation } from "../../lib/provider-readiness";

export function ProviderReadinessSummary({
  readiness,
}: {
  readiness?: ProviderReadinessSummaryRecord;
}) {
  if (!readiness || (!readiness.message && !readiness.operator_action && !readiness.reason))
    return null;

  return (
    <div
      style={{
        border: "1px solid var(--border)",
        borderRadius: "var(--radius-sm)",
        background: readinessSummaryBackground(readiness.status),
        padding: "10px 12px",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
        <span
          style={{
            width: 8,
            height: 8,
            borderRadius: 999,
            background: readinessColor(readiness.status),
            boxShadow: readiness.status === "ok" ? "0 0 10px rgba(96, 199, 112, 0.35)" : undefined,
            flexShrink: 0,
          }}
        />
        <span
          style={{
            fontSize: 10,
            color: "var(--t3)",
            fontFamily: "var(--font-mono)",
            textTransform: "uppercase",
            letterSpacing: "0.04em",
          }}
        >
          Readiness summary
        </span>
        {readiness.reason && (
          <span
            style={{
              fontSize: 10,
              color: "var(--t3)",
              fontFamily: "var(--font-mono)",
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              minWidth: 0,
            }}
          >
            {readiness.reason}
          </span>
        )}
      </div>
      {readiness.message && (
        <div
          style={{ fontSize: 12, color: readinessTextColor(readiness.status), lineHeight: 1.45 }}
        >
          {readiness.message}
        </div>
      )}
      {readiness.operator_action && (
        <div style={{ marginTop: 5, fontSize: 11, color: "var(--t2)", lineHeight: 1.45 }}>
          Next: {readiness.operator_action}
        </div>
      )}
    </div>
  );
}

export function ProviderReadinessChecklist({ checks }: { checks: ProviderReadinessCheckRecord[] }) {
  if (checks.length === 0) return null;

  return (
    <div
      style={{
        border: "1px solid var(--border)",
        borderRadius: "var(--radius-sm)",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          padding: "7px 10px",
          borderBottom: "1px solid var(--border)",
          background: "var(--bg2)",
          fontSize: 10,
          color: "var(--t3)",
          fontFamily: "var(--font-mono)",
          textTransform: "uppercase",
          letterSpacing: "0.04em",
        }}
      >
        Readiness
      </div>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {checks.map((check, index) => {
          const recommendation = readinessRecommendation(check);
          return (
            <div
              key={check.name}
              style={{
                display: "grid",
                gridTemplateColumns: "120px minmax(0, 1fr)",
                gap: 10,
                padding: "8px 10px",
                borderBottom: index === checks.length - 1 ? undefined : "1px solid var(--border)",
                alignItems: "start",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 7, minWidth: 0 }}>
                <span
                  style={{
                    width: 7,
                    height: 7,
                    borderRadius: 999,
                    background: readinessColor(check.status),
                    boxShadow:
                      check.status === "ok" ? "0 0 10px rgba(96, 199, 112, 0.35)" : undefined,
                    flexShrink: 0,
                  }}
                />
                <span
                  style={{
                    fontSize: 11,
                    color: "var(--t1)",
                    fontFamily: "var(--font-mono)",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                  }}
                >
                  {titleizeReadinessName(check.name)}
                </span>
              </div>
              <div style={{ minWidth: 0 }}>
                <div
                  style={{
                    fontSize: 11,
                    color: readinessTextColor(check.status),
                    lineHeight: 1.45,
                  }}
                >
                  {check.message || describeReadinessStatus(check.status)}
                </div>
                {check.reason && (
                  <div
                    style={{
                      marginTop: 2,
                      fontSize: 10,
                      color: "var(--t3)",
                      fontFamily: "var(--font-mono)",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {check.reason}
                  </div>
                )}
                {recommendation && (
                  <div style={{ marginTop: 4, fontSize: 10, color: "var(--t2)", lineHeight: 1.45 }}>
                    Next: {recommendation}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export function CompactProviderReadinessChecks({
  checks,
}: {
  checks: ProviderReadinessCheckRecord[];
}) {
  if (checks.length === 0) return null;

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
        gap: 8,
        marginTop: 10,
      }}
    >
      {checks.map((check) => {
        const recommendation = readinessRecommendation(check);
        return (
          <div
            key={check.name}
            title={[check.message, recommendation ? `Next: ${recommendation}` : ""]
              .filter(Boolean)
              .join("\n")}
            style={{
              border: "1px solid var(--border)",
              borderRadius: "var(--radius-sm)",
              background: "var(--bg3)",
              padding: "7px 8px",
              minWidth: 0,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span
                style={{
                  width: 7,
                  height: 7,
                  borderRadius: 999,
                  background: readinessColor(check.status),
                  flexShrink: 0,
                }}
              />
              <span
                style={{
                  fontSize: 10,
                  color: "var(--t3)",
                  fontFamily: "var(--font-mono)",
                  textTransform: "uppercase",
                  letterSpacing: "0.04em",
                }}
              >
                {titleizeReadinessName(check.name)}
              </span>
            </div>
            <div
              style={{
                marginTop: 4,
                fontSize: 11,
                color: readinessTextColor(check.status),
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {check.message || check.reason || check.status}
            </div>
            {recommendation && (
              <div
                style={{
                  marginTop: 3,
                  fontSize: 10,
                  color: "var(--t3)",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                Next: {recommendation}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function readinessColor(status?: string): string {
  switch (status) {
    case "ok":
      return "var(--green)";
    case "warning":
      return "var(--amber)";
    case "blocked":
      return "var(--red)";
    default:
      return "var(--t3)";
  }
}

function readinessTextColor(status?: string): string {
  switch (status) {
    case "blocked":
      return "var(--red)";
    case "warning":
      return "var(--amber)";
    default:
      return "var(--t2)";
  }
}

function readinessSummaryBackground(status?: string): string {
  switch (status) {
    case "blocked":
      return "var(--red-bg)";
    case "warning":
      return "var(--amber-bg)";
    case "ok":
      return "var(--green-bg)";
    default:
      return "var(--bg2)";
  }
}

function describeReadinessStatus(status?: string): string {
  switch (status) {
    case "ok":
      return "Ready";
    case "warning":
      return "Needs attention";
    case "blocked":
      return "Blocked";
    default:
      return "Unknown";
  }
}

function titleizeReadinessName(value: string): string {
  return value
    .split("_")
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(" ");
}
