"use client";

import type { ReactNode } from "react";

import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import { DocumentLink } from "@/components/ui/document-link";
import { DocumentFileAttachment } from "@/components/ui/document-file-name";
import { isDocumentPlaceholder } from "@/lib/document-file";

export function RequiredSectionTitle({ children }: { children: ReactNode }) {
  return (
    <Typography
      sx={{
        fontSize: 13,
        fontWeight: 500,
        color: "var(--ms-subtle, #414651)",
        mb: 2,
      }}
    >
      {children}
      <Typography component="span" sx={{ color: "#f04438" }}>
        {" "}
        *
      </Typography>
    </Typography>
  );
}

const DEFAULT_LABEL_WIDTH = 168;

export function DetailRow({
  icon,
  label,
  value,
  valueNode,
  labelWidth = DEFAULT_LABEL_WIDTH,
}: {
  icon: ReactNode;
  label: string;
  value?: string;
  valueNode?: ReactNode;
  labelWidth?: number;
}) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1.5,
        minWidth: 0,
      }}
    >
      <Box
        sx={{
          color: "var(--ms-muted, #717680)",
          display: "flex",
          alignItems: "center",
          flexShrink: 0,
          width: 20,
        }}
      >
        {icon}
      </Box>

      <Box
        sx={{
          flex: 1,
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          gap: 0.75,
        }}
      >
        <Typography
          sx={{
            width: labelWidth,
            flexShrink: 0,
            fontSize: 13,
            fontWeight: 400,
            color: "var(--ms-muted, #717680)",
            lineHeight: "22px",
            whiteSpace: "nowrap",
          }}
        >
          {label} :
        </Typography>

        {valueNode ? (
          <Box sx={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center" }}>
            {valueNode}
          </Box>
        ) : (
          <Typography
            className={/[\u1780-\u17FF]/.test(value ?? "") ? "font-kh" : undefined}
            noWrap
            sx={{
              flex: 1,
              minWidth: 0,
              overflow: "hidden",
              textOverflow: "ellipsis",
              fontSize: 13,
              fontWeight: 500,
              color: "var(--ms-text, #181d27)",
              lineHeight: "22px",
            }}
          >
            {value}
          </Typography>
        )}
      </Box>
    </Box>
  );
}

export function DocumentRow({
  icon,
  label,
  path,
  fileSize,
  labelWidth = DEFAULT_LABEL_WIDTH,
}: {
  icon: ReactNode;
  label: string;
  path?: string | null;
  fileSize?: string | null;
  labelWidth?: number;
}) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1.5,
        minWidth: 0,
      }}
    >
      <Box
        sx={{
          color: "var(--ms-muted, #717680)",
          display: "flex",
          alignItems: "center",
          flexShrink: 0,
          width: 20,
        }}
      >
        {icon}
      </Box>

      <Box
        sx={{
          flex: 1,
          minWidth: 0,
          display: "flex",
          alignItems: "center",
          gap: 0.75,
        }}
      >
        <Typography
          sx={{
            width: labelWidth,
            flexShrink: 0,
            fontSize: 13,
            fontWeight: 400,
            color: "var(--ms-muted, #717680)",
            lineHeight: "22px",
            whiteSpace: "nowrap",
          }}
        >
          {label} :
        </Typography>

        <Box sx={{ flex: 1, minWidth: 0 }}>
          {isDocumentPlaceholder(path) || !path ? (
            <Typography
              sx={{ fontSize: 12, fontWeight: 500, color: "#252b37" }}
            >
              -
            </Typography>
          ) : (
            <DocumentLink
              file={{ path }}
              sx={{
                display: "inline-flex",
                alignItems: "center",
                minWidth: 0,
                maxWidth: "100%",
              }}
            >
              <DocumentFileAttachment
                value={path}
                fileSize={fileSize}
                iconSize={20}
                emptyLabel="-"
              />
            </DocumentLink>
          )}
        </Box>
      </Box>
    </Box>
  );
}

export function AgencyValue({
  name,
  logo,
}: {
  name: string;
  logo?: string | null;
}) {
  return (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1, minWidth: 0 }}>
      <Avatar
        src={logo ?? undefined}
        alt={name}
        sx={{ width: 19, height: 19, fontSize: 8, flexShrink: 0 }}
      >
        {name.slice(0, 2)}
      </Avatar>
      <Typography
        noWrap
        sx={{
          minWidth: 0,
          overflow: "hidden",
          textOverflow: "ellipsis",
          fontSize: 13,
          fontWeight: 500,
          color: "var(--ms-text, #181d27)",
        }}
      >
        {name}
      </Typography>
    </Box>
  );
}