import { Box, Group, Text } from "@mantine/core";
import { CheckCircle2, FileText, MinusCircle } from "lucide-react";
import type { ReactNode } from "react";

type DocStatus = "verified" | "ready" | "missing";

const STATUS_PILL: Record<
  DocStatus,
  { label: string; bg: string; color: string; border?: string; icon?: ReactNode }
> = {
  verified: {
    label: "Uploaded",
    bg: "#ECF6F1",
    color: "#0A6F4D",
    border: "#CDEBDD",
    icon: <CheckCircle2 size={13} />,
  },
  ready: {
    label: "Ready",
    bg: "#EAF1FB",
    color: "#2E5B96",
  },
  missing: {
    label: "Not added",
    bg: "#F1F4F7",
    color: "#9AA8B5",
    icon: <MinusCircle size={13} />,
  },
};

export function DocRow({
  title,
  meta,
  status,
  action,
  last,
}: {
  title: string;
  meta: string;
  status: DocStatus;
  action: ReactNode;
  last?: boolean;
}) {
  const missing = status === "missing";
  const tileBg = status === "ready" ? "#EAF1FB" : "#F1F4F7";
  const tileFg =
    status === "ready" ? "#2E5B96" : missing ? "#9AA8B5" : "#475569";
  const pill = STATUS_PILL[status];

  return (
    <Group
      gap={13}
      align="center"
      wrap="nowrap"
      py={13}
      style={{
        borderBottom: last ? undefined : "1px solid #F2F5F8",
      }}
    >
      <Box
        style={{
          flexShrink: 0,
          width: 40,
          height: 40,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          borderRadius: 10,
          backgroundColor: tileBg,
          color: tileFg,
        }}
      >
        <FileText size={20} />
      </Box>
      <Box miw={0} flex={1}>
        <Text truncate fz="13.5px" fw={700} c={missing ? "#6B7C8E" : "#10202F"}>
          {title}
        </Text>
        <Text truncate fz="12px" c="#9AA8B5">
          {meta}
        </Text>
      </Box>
      <Group
        component="span"
        gap={6}
        align="center"
        wrap="nowrap"
        style={{
          display: "inline-flex",
          flexShrink: 0,
          borderRadius: 999,
          backgroundColor: pill.bg,
          border: pill.border ? `1px solid ${pill.border}` : undefined,
          padding: "5px 11px",
          fontSize: 11.5,
          fontWeight: 700,
          color: pill.color,
        }}
      >
        {pill.icon}
        {pill.label}
      </Group>
      {action}
    </Group>
  );
}

export function IconSquare({
  icon,
  href,
}: {
  icon: ReactNode;
  href?: string | null;
}) {
  const style: React.CSSProperties = {
    flexShrink: 0,
    width: 34,
    height: 34,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 8,
    border: "1px solid #E6ECF2",
    color: "#6B7C8E",
  };
  if (href) {
    return (
      <Box
        component="a"
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        style={style}
      >
        {icon}
      </Box>
    );
  }
  return (
    <Box component="span" style={style}>
      {icon}
    </Box>
  );
}

export function CountChip({
  uploaded,
  total,
}: {
  uploaded: number;
  total: number;
}) {
  const done = uploaded === total;
  return (
    <Group
      component="span"
      gap={6}
      align="center"
      wrap="nowrap"
      style={{
        display: "inline-flex",
        borderRadius: 999,
        padding: "5px 10px",
        fontSize: 11.5,
        fontWeight: 700,
        backgroundColor: done ? "#ECF6F1" : "#F1F4F7",
        color: done ? "#0A6F4D" : "#6B7C8E",
      }}
    >
      {done && <CheckCircle2 size={13} />}
      {uploaded} of {total} added
    </Group>
  );
}
