import type { ReactNode } from "react";
import type { AccountCardData, RepoCardData } from "~/lib/og";
import { OG_HEIGHT, OG_WIDTH } from "~/lib/og";
import { LOGO_SVG } from "./logo";
import { languageColor } from "~/lib/languages";

/** Mirrors src/styles/app.css: gray-950 page, gray-800 rules, the orange brand accent. */
const COLORS = {
  page: "#030712",
  rule: "#1f2937",
  text: "#f9fafb",
  body: "#d1d5db",
  muted: "#9ca3af",
  accent: "#f6821f",
  accentDeep: "#2a1404",
  accentSoft: "#ffb27a",
} as const;

const LOGO_URI = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;

const DESCRIPTION_CHARS = 170;
/** Topics take a row, so the description gives up about one line. */
const DESCRIPTION_WITH_TOPICS_CHARS = 90;

export function truncate(text: string, max: number): string {
  const clean = text.replace(/\s+/g, " ").trim();
  if (clean.length <= max) return clean;
  const cut = clean.slice(0, max - 1);
  const space = cut.lastIndexOf(" ");
  return `${(space > max * 0.6 ? cut.slice(0, space) : cut).replace(/[\s.,;:]+$/, "")}…`;
}

const THOUSAND = 1000;
const TEN_THOUSAND = 10_000;
const MILLION = 1_000_000;

export function compactCount(value: number): string {
  if (value < THOUSAND) return String(value);
  if (value < MILLION) return `${(value / THOUSAND).toFixed(value < TEN_THOUSAND ? 1 : 0).replace(/\.0$/, "")}k`;
  return `${(value / MILLION).toFixed(1).replace(/\.0$/, "")}m`;
}

function plural(value: number, one: string, many: string): string {
  return `${compactCount(value)} ${value === 1 ? one : many}`;
}

type Strip = ReadonlyArray<{ name: string; percent: number }>;

/** The bottom strip: the brand accent, or the repository's languages in proportion (as GitHub's cards do). */
function BottomStrip({ languages }: { languages?: Strip }) {
  if (!languages?.length) {
    return <div style={{ display: "flex", height: 10, flexShrink: 0, backgroundColor: COLORS.accent }} />;
  }
  return (
    <div style={{ display: "flex", height: 10, flexShrink: 0 }}>
      {languages.map((language) => (
        <div
          key={language.name}
          style={{ display: "flex", flexGrow: language.percent, backgroundColor: languageColor(language.name) }}
        />
      ))}
    </div>
  );
}

function Frame({ children, footer, languages }: { children: ReactNode; footer: string; languages?: Strip }) {
  return (
    <div
      style={{
        width: OG_WIDTH,
        height: OG_HEIGHT,
        display: "flex",
        flexDirection: "column",
        backgroundColor: COLORS.page,
        color: COLORS.text,
        fontFamily: "IBM Plex Sans",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          padding: "72px 80px 0 80px",
          overflow: "hidden",
        }}
      >
        {children}
      </div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          margin: "0 80px",
          padding: "28px 0 36px 0",
          flexShrink: 0,
          borderTop: `2px solid ${COLORS.rule}`,
        }}
      >
        <div style={{ display: "flex", alignItems: "center" }}>
          <img src={LOGO_URI} width={44} height={44} />
          <div style={{ display: "flex", marginLeft: 14, fontSize: 32, fontWeight: 600 }}>gitfor</div>
        </div>
        <div style={{ display: "flex", fontSize: 26, color: COLORS.muted }}>{footer}</div>
      </div>
      <BottomStrip languages={languages} />
    </div>
  );
}

function Avatar({ src, name, size }: { src: string | null; name: string; size: number }) {
  const radius = Math.round(size / 6);
  if (src) return <img src={src} width={size} height={size} style={{ borderRadius: radius }} />;
  return (
    <div
      style={{
        display: "flex",
        width: size,
        height: size,
        borderRadius: radius,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: COLORS.accentDeep,
        color: COLORS.accentSoft,
        fontSize: Math.round(size * 0.48),
        fontWeight: 600,
      }}
    >
      {name.slice(0, 1).toUpperCase()}
    </div>
  );
}

function Stats({ items, language }: { items: ReadonlyArray<string>; language?: string }) {
  return (
    <div style={{ display: "flex", alignItems: "center", fontSize: 30, color: COLORS.body }}>
      {language ? (
        <div style={{ display: "flex", alignItems: "center", marginRight: 44 }}>
          <div
            style={{
              display: "flex",
              width: 22,
              height: 22,
              borderRadius: 11,
              backgroundColor: languageColor(language),
            }}
          />
          <div style={{ display: "flex", marginLeft: 12 }}>{truncate(language, 20)}</div>
        </div>
      ) : null}
      {items.map((item, index) => (
        <div key={item} style={{ display: "flex", marginLeft: index === 0 ? 0 : 44 }}>
          {item}
        </div>
      ))}
    </div>
  );
}

function Topics({ topics }: { topics: readonly string[] }) {
  if (topics.length === 0) return null;
  return (
    <div style={{ display: "flex", flexWrap: "wrap", marginTop: 24 }}>
      {topics.map((topic) => (
        <div
          key={topic}
          style={{
            display: "flex",
            fontSize: 24,
            color: COLORS.accentSoft,
            backgroundColor: COLORS.accentDeep,
            borderRadius: 22,
            padding: "6px 18px",
            marginRight: 12,
            marginBottom: 8,
          }}
        >
          {truncate(topic, 24)}
        </div>
      ))}
    </div>
  );
}

export function RepoCard({ repo, avatar, host }: { repo: RepoCardData; avatar: string | null; host: string }) {
  const stats = [
    plural(repo.stars, "star", "stars"),
    plural(repo.forks, "fork", "forks"),
    plural(repo.openIssues, "issue", "issues"),
    plural(repo.openPulls, "pull request", "pull requests"),
  ];
  return (
    <Frame
      footer={repo.latestRelease ? `Latest release ${truncate(repo.latestRelease, 28)}` : host}
      languages={repo.languages}
    >
      <div style={{ display: "flex", justifyContent: "space-between", flexGrow: 1 }}>
        <div style={{ display: "flex", flexDirection: "column", width: 820 }}>
          <div style={{ display: "flex", fontSize: 44, color: COLORS.muted }}>{truncate(repo.owner, 38)}/</div>
          <div style={{ display: "flex", fontSize: 72, fontWeight: 600, lineHeight: 1.1, marginTop: 4 }}>
            {truncate(repo.name, 26)}
          </div>
          {repo.description ? (
            <div style={{ display: "flex", fontSize: 32, lineHeight: 1.4, color: COLORS.body, marginTop: 28 }}>
              {truncate(repo.description, repo.topics.length ? DESCRIPTION_WITH_TOPICS_CHARS : DESCRIPTION_CHARS)}
            </div>
          ) : null}
          <Topics topics={repo.topics} />
        </div>
        <Avatar src={avatar} name={repo.owner} size={180} />
      </div>
      <div style={{ display: "flex", marginBottom: 36 }}>
        <Stats items={stats} language={repo.languages.find((language) => language.name !== "Other")?.name} />
      </div>
    </Frame>
  );
}

export function AccountCard({
  account,
  avatar,
  host,
}: {
  account: AccountCardData;
  avatar: string | null;
  host: string;
}) {
  const title = account.displayName?.trim() || account.name;
  const kind = account.kind === "org" ? "Organization" : "User";
  return (
    <Frame footer={`${host}/${truncate(account.name, 30)}`}>
      <div style={{ display: "flex", flexGrow: 1 }}>
        <Avatar src={avatar} name={account.name} size={220} />
        <div style={{ display: "flex", flexDirection: "column", marginLeft: 56, width: 744 }}>
          <div style={{ display: "flex", fontSize: 68, fontWeight: 600, lineHeight: 1.1 }}>{truncate(title, 24)}</div>
          <div style={{ display: "flex", fontSize: 36, color: COLORS.muted, marginTop: 10 }}>
            {title === account.name ? kind : `${truncate(account.name, 30)} · ${kind}`}
          </div>
          {account.bio ? (
            <div style={{ display: "flex", fontSize: 30, lineHeight: 1.4, color: COLORS.body, marginTop: 28 }}>
              {truncate(account.bio, 150)}
            </div>
          ) : null}
        </div>
      </div>
      <div style={{ display: "flex", marginBottom: 36 }}>
        <Stats items={[plural(account.publicRepos, "public repository", "public repositories")]} />
      </div>
    </Frame>
  );
}

function TextCard({ title, body, footer }: { title: string; body: string; footer: string }) {
  return (
    <Frame footer={footer}>
      <div style={{ display: "flex", flexDirection: "column", width: 1000 }}>
        <div style={{ display: "flex", fontSize: 76, fontWeight: 600, lineHeight: 1.1 }}>{truncate(title, 60)}</div>
        <div style={{ display: "flex", fontSize: 34, lineHeight: 1.4, color: COLORS.body, marginTop: 32 }}>
          {truncate(body, 190)}
        </div>
      </div>
    </Frame>
  );
}

export function SiteCard({ host }: { host: string }) {
  return (
    <TextCard
      title="Git hosting, code review and CI"
      body="Repositories, pull requests, Actions-style CI, issues, security scanning and sites. Open source under 0BSD, and you can run your own instance."
      footer={host}
    />
  );
}

export function FeatureCard({ title, lede, slug, host }: { title: string; lede: string; slug: string; host: string }) {
  return <TextCard title={title} body={lede} footer={`${host}/features/${slug}`} />;
}