"use client";

import { useTranslations } from "next-intl";

export type FormatFileProps =
  | "doc" | "pdf" | "md" | "mdx" | "csv" | "xls" | "xlsx" | "txt"
  | "ppt" | "pptx" | "zip" | "rar" | "tar" | "gz" | "code" | "html"
  | "js" | "jsx" | "tsx" | "css" | "json" | "img" | "png" | "jpg" | "jpeg" | "video"
  | "figma" | "sql";

type FileCardProps = { formatFile: FormatFileProps };

/* `label` is a message key, not a word — the card sits in a dashboard that
   flips language. The abbreviation stays as it is: it is the format, not prose. */
const META: Record<FormatFileProps, { abbr: string; labelKey: string }> = {
  pdf:   { abbr: "PDF",  labelKey: "pdf"        },
  doc:   { abbr: "DOC",  labelKey: "document"   },
  txt:   { abbr: "TXT",  labelKey: "text"       },
  md:    { abbr: "MD",   labelKey: "markdown"   },
  mdx:   { abbr: "MDX",  labelKey: "mdx"        },
  // "Spreadsheet" is 11 characters in a 34px column — it never fit. The abbr
  // below it already carries the specific format.
  csv:   { abbr: "CSV",  labelKey: "sheet"      },
  xls:   { abbr: "XLS",  labelKey: "sheet"      },
  xlsx:  { abbr: "XLS",  labelKey: "sheet"      },
  ppt:   { abbr: "PPT",  labelKey: "slides"     },
  pptx:  { abbr: "PPT",  labelKey: "slides"     },
  zip:   { abbr: "ZIP",  labelKey: "archive"    },
  rar:   { abbr: "RAR",  labelKey: "archive"    },
  tar:   { abbr: "TAR",  labelKey: "archive"    },
  gz:    { abbr: "GZ",   labelKey: "archive"    },
  /* `code` means code. It was carrying Figma's abbreviation and label, so a
     .sql or .js file drew a card that said "FIG · design" — the right shape
     with somebody else's name on it. Figma has its own entry now. */
  code:  { abbr: "SRC",  labelKey: "code"       },
  figma: { abbr: "FIG",  labelKey: "design"     },
  html:  { abbr: "HTML", labelKey: "html"       },
  js:    { abbr: "JS",   labelKey: "script"     },
  jsx:   { abbr: "JSX",  labelKey: "react"      },
  tsx:   { abbr: "TSX",  labelKey: "react"      },
  css:   { abbr: "CSS",  labelKey: "styles"     },
  json:  { abbr: "JSON", labelKey: "data"       },
  img:   { abbr: "IMG",  labelKey: "image"      },
  png:   { abbr: "PNG",  labelKey: "image"      },
  jpg:   { abbr: "JPG",  labelKey: "image"      },
  jpeg:  { abbr: "JPG",  labelKey: "image"      },
  sql:   { abbr: "SQL",  labelKey: "data"       },
  video: { abbr: "VID",  labelKey: "video"      },
};

export const FileCard = ({ formatFile }: FileCardProps) => {
  const t = useTranslations("common");
  const { abbr, labelKey } = META[formatFile] ?? { abbr: "FILE", labelKey: "file" };
  const label = t(`fileFormat.${labelKey}`);

  // The card is 84px wide now, up from 56, and the label column gets ~56px of
  // it. The longer labels ("Document", "Spreadsheet", "Markdown") still
  // overflow at a readable size, so they wrap to two lines — tracking is
  // dropped for those so the wrap lands between words rather than mid-word.
  const longLabel = label.length > 9;

  // "HTML" and "JSON" are as wide as the card at 20px. Step the size down for
  // four-character abbreviations rather than letting them spill.
  const abbrSize = abbr.length >= 4 ? "1.25rem" : "1.6rem";

  return (
    <div
      aria-hidden
      className="h-[6.5rem] w-[5.25rem] border border-black/[0.10] dark:border-white/[0.10] flex flex-col justify-between p-2 overflow-hidden"
      style={{ borderRadius: "var(--radius-sm)" }}
    >
      {/* Micro-label + orange dot */}
      <div className="flex items-start justify-between gap-1">
        <span
          // break-words matters: the long labels are single words, so without
          // it they can't wrap at all and just spill past the border.
          className={`min-w-0 flex-1 break-words font-bold uppercase text-black/40 dark:text-white/30 ${
            longLabel
              ? "text-[6px] tracking-normal leading-[1.15]"
              : "text-[6.5px] tracking-[0.12em] leading-tight"
          }`}
        >
          {label}
        </span>
        <div className="h-1.5 w-1.5 shrink-0 mt-0.5" style={{ backgroundColor: "#FF6520", borderRadius: "var(--radius-full)" }} />
      </div>

      {/* Divider */}
      <hr className="border-black/[0.07] dark:border-white/[0.08]" />

      {/* Large faded abbreviation */}
      <span
        className="max-w-full font-bold leading-none uppercase tracking-tight text-black/[0.09] dark:text-white/[0.07] self-end"
        style={{ fontSize: abbrSize }}
      >
        {abbr}
      </span>
    </div>
  );
};

export default FileCard;