import { useState } from "react";
import {
  BreadcrumbFolderIcon,
  BreadcrumbHomeIcon,
  Breadcrumbs,
  type BreadcrumbItem,
} from "./Breadcrumbs";
import { CatalogContentDivider, CatalogDivider } from "./CatalogDivider";
import { FileUpload, type FileUploadFile } from "./FileUpload";
import { Table, type TableColumn, type TableRowBase } from "./Table";
import { CatalogTag, type CatalogTagState, type CatalogTagType } from "./CatalogTag";
import "./catalogComponentsShowcase.css";

type ProjectRow = TableRowBase & {
  deadline: string;
  leader: string;
  name: string;
  progress: number;
  status: "On track" | "Review" | "Blocked";
};

const breadcrumbItems: BreadcrumbItem[] = [
  { label: "Home", href: "#", icon: <BreadcrumbHomeIcon /> },
  { label: "Design system", href: "#", icon: <BreadcrumbFolderIcon /> },
  { label: "Components", href: "#" },
  { label: "Playground", current: true },
];

const rtlBreadcrumbItems: BreadcrumbItem[] = [
  { label: "\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629", href: "#", icon: <BreadcrumbHomeIcon /> },
  { label: "\u0627\u0644\u0646\u0638\u0627\u0645", href: "#", icon: <BreadcrumbFolderIcon /> },
  { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
];

const breadcrumbAriaLabel = "Catalog breadcrumbs";
const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";

const uploadFiles: FileUploadFile[] = [
  { id: "tokens", name: "semantic-tokens.json", sizeLabel: "4 MB", versionLabel: "v3.0", status: "uploaded" },
  { id: "components", name: "component-inventory.csv", sizeLabel: "18 MB", versionLabel: "v2.4", status: "uploading" },
  { id: "icons", name: "icons-shortlist.pdf", sizeLabel: "7 MB", status: "error", errorLabel: "Needs retry" },
];

const fileUploadCopy = {
  browseLabel: "Browse",
  helperText: "SVG, PNG, PDF, or CSV up to 50 MB",
  prompt: "Drag and drop files here, or",
};

const projectRows: ProjectRow[] = [
  { id: "1", name: "Component audit", leader: "Maya Chen", progress: 84, status: "On track", deadline: "Jun 12" },
  { id: "2", name: "Icon decision", leader: "Ahmed Galal", progress: 64, status: "Review", deadline: "Jun 18" },
  { id: "3", name: "RTL matrix", leader: "Nora Ali", progress: 38, status: "Blocked", deadline: "Jun 20" },
  { id: "4", name: "Preset QA", leader: "Sam Rivera", progress: 92, status: "On track", deadline: "Jun 24", state: "disabled" },
];

const columns: TableColumn<ProjectRow>[] = [
  { id: "select", width: 42, kind: "selection" },
  {
    id: "project",
    header: "Project Name",
    width: "fill",
    minWidth: 230,
    sortable: true,
    item: (row) => ({ type: "text", value: row.name, weight: "medium" }),
  },
  {
    id: "leader",
    header: "Project Leader",
    width: 190,
    sortable: true,
    item: (row) => ({ type: "avatarText", name: row.leader, caption: "Design ops" }),
  },
  {
    id: "status",
    header: "Status",
    width: 138,
    sortable: true,
    item: (row) => ({
      type: "badges",
      items: [
        {
          dot: true,
          label: row.status,
          tone: row.status === "On track" ? "success" : row.status === "Review" ? "amber" : "danger",
        },
      ],
    }),
  },
  {
    id: "progress",
    header: "Progress",
    width: 160,
    sortable: true,
    item: (row) => ({ type: "progress", value: row.progress, label: `${row.progress}%` }),
  },
  {
    id: "deadline",
    header: "Deadline",
    width: 120,
    sortable: true,
    item: (row) => ({ type: "text", value: row.deadline, tone: "subtle" }),
  },
  { id: "actions", width: 44, kind: "actions", item: () => ({ type: "action", icon: "more", label: "Open row actions" }) },
];

const tagTypes: CatalogTagType[] = ["simple", "dot", "flag", "avatar", "icon"];
const tagStates: CatalogTagState[] = ["default", "active", "disabled"];

export function CatalogComponentsShowcase() {
  const [selectedRows, setSelectedRows] = useState(["1", "2"]);

  return (
    <div className="catalog-showcase">
      <ShowcaseCard title="Breadcrumbs" description="Default, raised, icon-only, separator, and RTL variants.">
        <div className="catalog-showcase__stack">
          <Breadcrumbs aria-label={breadcrumbAriaLabel} items={breadcrumbItems} overflowLabel="More" />
          <Breadcrumbs aria-label={breadcrumbAriaLabel} items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
          <Breadcrumbs aria-label={breadcrumbAriaLabel} iconOnly items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
          <Breadcrumbs
            aria-label={rtlBreadcrumbAriaLabel}
            dir="rtl"
            items={rtlBreadcrumbItems}
            overflowLabel="\u0627\u0644\u0645\u0632\u064a\u062f"
            separator="chevron"
            style="raised"
          />
        </div>
      </ShowcaseCard>

      <ShowcaseCard title="Dividers" description="Plain separators plus content dividers with label or action content.">
        <div className="catalog-showcase__stack">
          <CatalogDivider />
          <CatalogDivider borderStyle="dotted" />
          <CatalogContentDivider label="Text" />
          <CatalogContentDivider actionLabel="Button" onAction={() => undefined} />
          <CatalogContentDivider dir="rtl" label="\u0646\u0635" borderStyle="dotted" />
        </div>
      </ShowcaseCard>

      <ShowcaseCard title="Tags" description="Type, state, size, close button, and RTL coverage.">
        <div className="catalog-showcase__tag-grid">
          {tagTypes.map((type) => (
            <CatalogTag
              closeLabel="Remove tag"
              key={type}
              showCloseButton={type === "simple"}
              type={type}
              avatar={type === "avatar" ? "A" : undefined}
            >
              {type}
            </CatalogTag>
          ))}
          {tagStates.map((state) => (
            <CatalogTag key={state} state={state} type="dot">
              {state}
            </CatalogTag>
          ))}
          <CatalogTag size="xs">xs</CatalogTag>
          <CatalogTag size="md">md</CatalogTag>
          <CatalogTag closeLabel="Remove tag" size="lg" showCloseButton>
            large
          </CatalogTag>
          <CatalogTag
            avatar="\u0645"
            closeLabel="\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645"
            dir="rtl"
            type="avatar"
            showCloseButton
          >
            \u0645\u0644\u0635\u0642
          </CatalogTag>
        </div>
      </ShowcaseCard>

      <ShowcaseCard title="File Upload" description="Large and small queued-file upload states.">
        <div className="catalog-showcase__upload-grid">
          <FileUpload {...fileUploadCopy} files={uploadFiles} multiple />
          <FileUpload {...fileUploadCopy} files={uploadFiles.slice(0, 1)} size="sm" />
        </div>
      </ShowcaseCard>

      <ShowcaseCard title="Table" description="Selection, sort headers, status badges, progress, row states, and RTL mirroring.">
        <div className="catalog-showcase__stack">
          <Table columns={columns} rows={projectRows} selectedRowIds={selectedRows} onSelectedRowIdsChange={setSelectedRows} />
          <Table columns={columns} dir="rtl" rows={projectRows.slice(0, 3)} selectedRowIds={selectedRows} onSelectedRowIdsChange={setSelectedRows} />
        </div>
      </ShowcaseCard>
    </div>
  );
}

function ShowcaseCard({
  children,
  description,
  title,
}: {
  children: React.ReactNode;
  description: string;
  title: string;
}) {
  return (
    <article className="catalog-showcase__card">
      <header className="catalog-showcase__card-header">
        <h3>{title}</h3>
        <p>{description}</p>
      </header>
      {children}
    </article>
  );
}
