"use client";

// Shared repo picker used by the Loop + Research wizards. Fetches the
// workspace's already-connected repos from /api/repos (+ /api/repos/connections
// for the provider label) and lets the user pick one — or skip when optional.
//
// Emits a compact PickedRepo the caller can send in its create body; the
// backend can persist the id later without another round-trip.

import { useEffect, useMemo, useState } from "react";
import { GitBranch, Search, X } from "lucide-react";

const mono =
  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";

export interface PickedRepo {
  repo_id: string;
  connection_id: string;
  provider: string;
  owner: string;
  name: string;
  default_branch: string | null;
}

interface RepoSummary {
  id: string;
  connection_id: string;
  provider: string;
  owner: string;
  name: string;
  private: boolean;
  description: string | null;
  default_branch: string | null;
  stars: number;
  forks: number;
  updated_at: string | null;
}

interface ConnectionSummary {
  id: string;
  provider: string;
  owner: string | null;
  base_url?: string | null;
  label?: string;
}

export function RepoPicker({
  value,
  onChange,
  optional = false,
  emptyHint,
}: {
  value: PickedRepo | null;
  onChange: (v: PickedRepo | null) => void;
  optional?: boolean;
  emptyHint?: string;
}) {
  const [repos, setRepos] = useState<RepoSummary[] | null>(null);
  const [connections, setConnections] = useState<ConnectionSummary[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [query, setQuery] = useState("");

  useEffect(() => {
    let cancelled = false;
    async function load() {
      try {
        const [rRes, cRes] = await Promise.all([
          fetch("/api/repos"),
          fetch("/api/repos/connections"),
        ]);
        if (cancelled) return;
        if (rRes.ok) setRepos(await rRes.json());
        else setRepos([]);
        if (cRes.ok) setConnections(await cRes.json());
      } catch (e) {
        if (!cancelled) {
          setError(e instanceof Error ? e.message : "load failed");
          setRepos([]);
        }
      }
    }
    void load();
    return () => {
      cancelled = true;
    };
  }, []);

  const connLabel = useMemo(() => {
    const m = new Map<string, string>();
    for (const c of connections) {
      m.set(c.id, c.label || c.owner || c.provider);
    }
    return m;
  }, [connections]);

  const filtered = useMemo(() => {
    if (!repos) return [];
    const q = query.trim().toLowerCase();
    if (!q) return repos;
    return repos.filter(
      (r) =>
        r.name.toLowerCase().includes(q) ||
        r.owner.toLowerCase().includes(q) ||
        (r.description ?? "").toLowerCase().includes(q),
    );
  }, [repos, query]);

  const grouped = useMemo(() => groupByOwner(filtered), [filtered]);

  if (repos === null) {
    return (
      <p style={hintStyle}>Loading repositories…</p>
    );
  }

  if (repos.length === 0) {
    return (
      <div
        style={{
          padding: 14,
          borderRadius: 10,
          border: "1px dashed rgba(255,255,255,.14)",
          background: "rgba(255,255,255,.02)",
          display: "flex",
          flexDirection: "column",
          gap: 8,
        }}
      >
        <div style={{ fontFamily: mono, fontSize: 12, color: "#cfcfd5" }}>
          No repositories connected yet.
        </div>
        <div style={hintStyle}>
          {emptyHint ??
            "Connect a GitHub/Gitea provider from the REPOS tier first, then come back."}
        </div>
        {optional ? (
          <button
            type="button"
            onClick={() => onChange(null)}
            style={{ ...secondaryBtn, alignSelf: "flex-start" }}
          >
            Continue without a repo
          </button>
        ) : null}
      </div>
    );
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {value && (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            padding: "10px 12px",
            borderRadius: 10,
            border: "1px solid rgba(255,111,97,.5)",
            background: "rgba(255,111,97,.08)",
          }}
        >
          <GitBranch aria-hidden size={14} style={{ color: "#ffbfb3" }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div
              style={{
                fontFamily: mono,
                fontSize: 12,
                color: "#f3f3f5",
                fontWeight: 700,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
              }}
            >
              {value.owner}/{value.name}
            </div>
            <div style={hintStyle}>
              {value.provider}
              {value.default_branch ? ` · ${value.default_branch}` : ""}
              {connLabel.get(value.connection_id)
                ? ` · ${connLabel.get(value.connection_id)}`
                : ""}
            </div>
          </div>
          <button
            type="button"
            onClick={() => onChange(null)}
            aria-label="Clear selection"
            style={{
              width: 26,
              height: 26,
              borderRadius: 6,
              border: "1px solid rgba(255,255,255,.14)",
              background: "transparent",
              color: "#cfcfd5",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <X aria-hidden size={12} />
          </button>
        </div>
      )}

      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          padding: "8px 10px",
          borderRadius: 8,
          border: "1px solid rgba(255,255,255,.12)",
          background: "#0a0a0c",
        }}
      >
        <Search aria-hidden size={13} style={{ color: "#8a8a92" }} />
        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Filter by owner, name, or description…"
          style={{
            flex: 1,
            border: 0,
            outline: "none",
            background: "transparent",
            color: "#f3f3f5",
            fontSize: 13,
          }}
        />
        {optional ? (
          <button
            type="button"
            onClick={() => onChange(null)}
            style={{
              ...secondaryBtn,
              padding: "4px 10px",
              fontSize: 11,
            }}
          >
            None
          </button>
        ) : null}
      </div>

      <div
        style={{
          maxHeight: 320,
          overflow: "auto",
          border: "1px solid rgba(255,255,255,.06)",
          borderRadius: 10,
          background: "rgba(255,255,255,.02)",
        }}
      >
        {grouped.length === 0 ? (
          <p style={{ ...hintStyle, padding: 12 }}>No repos match the filter.</p>
        ) : (
          grouped.map(([owner, list]) => (
            <div key={owner}>
              <div
                style={{
                  padding: "6px 12px",
                  fontFamily: mono,
                  fontSize: 10,
                  letterSpacing: ".1em",
                  textTransform: "uppercase",
                  color: "#8a8a92",
                  background: "rgba(255,255,255,.03)",
                  borderBottom: "1px solid rgba(255,255,255,.05)",
                  position: "sticky",
                  top: 0,
                }}
              >
                {owner}
              </div>
              {list.map((r) => {
                const active = value?.repo_id === r.id;
                return (
                  <button
                    key={r.id}
                    type="button"
                    onClick={() =>
                      onChange({
                        repo_id: r.id,
                        connection_id: r.connection_id,
                        provider: r.provider,
                        owner: r.owner,
                        name: r.name,
                        default_branch: r.default_branch,
                      })
                    }
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 10,
                      width: "100%",
                      textAlign: "left",
                      padding: "8px 12px",
                      background: active
                        ? "rgba(255,138,122,.08)"
                        : "transparent",
                      border: 0,
                      borderBottom: "1px solid rgba(255,255,255,.04)",
                      cursor: "pointer",
                      color: "#eaeaee",
                    }}
                  >
                    <GitBranch
                      aria-hidden
                      size={13}
                      style={{ color: active ? "#ffbfb3" : "#5a5a62" }}
                    />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div
                        style={{
                          fontSize: 13,
                          fontWeight: active ? 700 : 500,
                          color: "#f3f3f5",
                          overflow: "hidden",
                          textOverflow: "ellipsis",
                          whiteSpace: "nowrap",
                        }}
                      >
                        {r.name}
                      </div>
                      {r.description ? (
                        <div
                          style={{
                            fontFamily: mono,
                            fontSize: 11,
                            color: "#8a8a92",
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            whiteSpace: "nowrap",
                          }}
                        >
                          {r.description}
                        </div>
                      ) : null}
                    </div>
                    <span
                      style={{
                        fontFamily: mono,
                        fontSize: 10,
                        color: "#5a5a62",
                        flexShrink: 0,
                      }}
                    >
                      {r.default_branch ?? "—"}
                    </span>
                  </button>
                );
              })}
            </div>
          ))
        )}
      </div>

      {error && (
        <p style={{ ...hintStyle, color: "#ff8a7a" }}>{error}</p>
      )}
    </div>
  );
}

function groupByOwner(repos: RepoSummary[]): [string, RepoSummary[]][] {
  const map = new Map<string, RepoSummary[]>();
  for (const r of repos) {
    const key = r.owner || "(unknown)";
    const bucket = map.get(key) ?? [];
    bucket.push(r);
    map.set(key, bucket);
  }
  const out = Array.from(map.entries());
  out.sort(([a], [b]) => a.localeCompare(b));
  for (const [, arr] of out) arr.sort((x, y) => x.name.localeCompare(y.name));
  return out;
}

const hintStyle: React.CSSProperties = {
  fontFamily: mono,
  fontSize: 11,
  color: "#8a8a92",
  lineHeight: 1.5,
};
const secondaryBtn: React.CSSProperties = {
  padding: "6px 12px",
  borderRadius: 6,
  border: "1px solid rgba(255,255,255,.14)",
  background: "transparent",
  color: "#cfcfd5",
  fontSize: 12,
  fontWeight: 600,
  cursor: "pointer",
};