import { For, Show } from "solid-js";
import { BTN_GHOST, BTN_PRIMARY, CARD } from "../DashboardShell";

type Props = {
  statusLabel: string;
  statusColor: string;
  locked: boolean;
  approved: boolean;
  docRequest?: string | null;
  missingBasicLabels: string[];
  missingDocLabels: string[];
  missingPortfolioLabels?: string[];
  canSubmit: boolean;
  submitting: boolean;
  onSubmit: () => void;
  onGoBasic: () => void;
  onGoDocuments: () => void;
};

export default function VerificationSubmissionGuide(props: Props) {
  const portfolioMissing = () => props.missingPortfolioLabels ?? [];
  const totalMissing = () => props.missingBasicLabels.length + props.missingDocLabels.length + portfolioMissing().length;

  return (
    <div style={{ ...CARD, "margin-bottom": "16px", display: "grid", gap: "12px" }}>
      <div
        style={{
          display: "flex",
          "align-items": "center",
          "justify-content": "space-between",
          gap: "10px",
          "flex-wrap": "wrap",
        }}
      >
        <div style={{ display: "flex", "align-items": "center", gap: "10px" }}>
          <span
            style={{
              display: "inline-flex",
              "align-items": "center",
              height: "24px",
              padding: "0 10px",
              "border-radius": "999px",
              border: "1px solid #E5E7EB",
              background: "#F9FAFB",
              color: "#4B5563",
              "font-size": "11px",
              "font-weight": "700",
            }}
          >
            {props.statusLabel}
          </span>
          <span style={{ "font-size": "13px", color: "#6B7280" }}>
            {props.approved
              ? "Your profile is approved."
              : props.locked
                ? "Verification in progress."
                : totalMissing() === 0
                  ? "Ready to submit for verification."
                  : `${totalMissing()} item${totalMissing() > 1 ? "s" : ""} left before submission.`}
          </span>
        </div>
        <Show when={!props.locked && !props.approved}>
          <button
            type="button"
            onClick={props.onSubmit}
            disabled={!props.canSubmit || props.submitting}
            style={{
              ...BTN_PRIMARY,
              background: "#0D0D2A",
              color: "#FFFFFF",
              border: "none",
              opacity: "1",
              cursor: !props.canSubmit || props.submitting ? "not-allowed" : "pointer",
            }}
          >
            {props.submitting ? "Submitting..." : "Submit for Verification"}
          </button>
        </Show>
      </div>

      <Show when={props.docRequest}>
        <div
          style={{
            border: "1px solid #FED7AA",
            background: "#FFF7ED",
            padding: "10px 12px",
            "border-radius": "10px",
            "font-size": "12px",
            color: "#9A3412",
          }}
        >
          <strong>Admin request:</strong> {props.docRequest}
        </div>
      </Show>

      <div style={{ display: "grid", gap: "8px" }}>
        <div
          style={{
            border: "1px solid #E5E7EB",
            "border-radius": "10px",
            padding: "10px 12px",
            background: "#FFFFFF",
          }}
        >
          <p style={{ margin: "0", "font-size": "12px", "font-weight": "700", color: "#111827" }}>
            1. Complete required basic profile fields
          </p>
          <Show
            when={props.missingBasicLabels.length > 0}
            fallback={<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>Done.</p>}
          >
            <p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>
              Missing: {props.missingBasicLabels.join(", ")}
            </p>
            <button type="button" onClick={props.onGoBasic} style={{ ...BTN_GHOST, height: "30px", "margin-top": "8px", "font-size": "12px" }}>
              Go to Basic Information
            </button>
          </Show>
        </div>

        <div
          style={{
            border: "1px solid #E5E7EB",
            "border-radius": "10px",
            padding: "10px 12px",
            background: "#FFFFFF",
          }}
        >
          <p style={{ margin: "0", "font-size": "12px", "font-weight": "700", color: "#111827" }}>
            2. Upload clear required documents
          </p>
          <Show
            when={props.missingDocLabels.length > 0}
            fallback={<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>Done.</p>}
          >
            <div style={{ display: "flex", gap: "6px", "flex-wrap": "wrap", "margin-top": "6px" }}>
              <For each={props.missingDocLabels}>
                {(item) => (
                  <span
                    style={{
                      height: "22px",
                      display: "inline-flex",
                      "align-items": "center",
                      padding: "0 8px",
                      "border-radius": "999px",
                      border: "1px solid #E5E7EB",
                      background: "#F9FAFB",
                      "font-size": "11px",
                      color: "#6B7280",
                    }}
                  >
                    {item}
                  </span>
                )}
              </For>
            </div>
            <button type="button" onClick={props.onGoDocuments} style={{ ...BTN_GHOST, height: "30px", "margin-top": "8px", "font-size": "12px" }}>
              Go to Documents
            </button>
          </Show>
        </div>

        <div
          style={{
            border: "1px solid #E5E7EB",
            "border-radius": "10px",
            padding: "10px 12px",
            background: "#FFFFFF",
          }}
        >
          <p style={{ margin: "0", "font-size": "12px", "font-weight": "700", color: "#111827" }}>
            3. Add portfolio showcase items
          </p>
          <Show
            when={portfolioMissing().length > 0}
            fallback={<p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>Done.</p>}
          >
            <p style={{ margin: "4px 0 0", "font-size": "12px", color: "#6B7280" }}>
              Missing: {portfolioMissing().join(", ")}. Go to <strong>My Portfolio</strong> and complete these sections.
            </p>
          </Show>
        </div>
      </div>

      <p style={{ margin: "0", "font-size": "12px", color: "#6B7280" }}>
        Document tips: use full-page, readable scans, and match name/address exactly with your profile details.
      </p>
    </div>
  );
}
