import type { WireframeVariant } from "./guide-data";

/**
 * Minimal line-art wireframe mockups for the knowledge-base feature pages.
 * Muted gray boxes with brand accents, ~16:10 aspect, RTL-aware via logical
 * properties (start-/end-/ps-/pe-) so the layout mirrors in Persian.
 * Pure presentational markup — safe to render on the server.
 */

const FRAME =
  "relative w-full overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 p-4 shadow-sm";
const ASPECT = "aspect-[16/10]";

function Bar({ w = "w-full", h = "h-2.5", tone = "bg-gray-200" }: { w?: string; h?: string; tone?: string }) {
  return <div className={`${w} ${h} rounded-full ${tone}`} />;
}

function Board() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex flex-col gap-3`}>
        {/* header bar */}
        <div className="flex items-center justify-between rounded-lg bg-white px-3 py-2 shadow-sm">
          <div className="h-2.5 w-20 rounded-full bg-brand-700" />
          <div className="flex gap-1.5">
            <div className="h-4 w-10 rounded-md bg-brand-100" />
            <div className="h-4 w-10 rounded-md bg-gray-200" />
          </div>
        </div>
        {/* grid of cards */}
        <div className="grid flex-1 grid-cols-3 grid-rows-2 gap-2.5">
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <div
              key={i}
              className={`flex flex-col justify-between rounded-lg border bg-white p-2 ${
                i % 3 === 0 ? "border-brand-200" : "border-gray-200"
              }`}
            >
              <div className="flex items-center justify-between">
                <div className="h-2 w-6 rounded-full bg-gray-300" />
                <div
                  className={`h-2 w-2 rounded-full ${
                    i % 3 === 0 ? "bg-brand-500" : i % 2 === 0 ? "bg-amber-300" : "bg-gray-200"
                  }`}
                />
              </div>
              <Bar w="w-3/4" h="h-1.5" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Order() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex gap-3`}>
        {/* category rail (start side = right in RTL) */}
        <div className="flex w-12 flex-col gap-2">
          {[0, 1, 2, 3].map((i) => (
            <div
              key={i}
              className={`h-9 rounded-lg ${i === 0 ? "bg-brand-700" : "bg-white border border-gray-200"}`}
            />
          ))}
        </div>
        {/* item grid */}
        <div className="grid flex-1 grid-cols-3 grid-rows-3 gap-2">
          {Array.from({ length: 9 }).map((_, i) => (
            <div key={i} className="flex flex-col gap-1 rounded-lg border border-gray-200 bg-white p-1.5">
              <div className="h-5 flex-1 rounded bg-gray-100" />
              <Bar w="w-3/5" h="h-1.5" tone="bg-brand-200" />
            </div>
          ))}
        </div>
        {/* ticket / total */}
        <div className="flex w-20 flex-col gap-2 rounded-lg bg-white p-2 shadow-sm">
          <div className="h-2 w-12 rounded-full bg-gray-300" />
          <Bar w="w-full" h="h-1.5" />
          <Bar w="w-4/5" h="h-1.5" />
          <Bar w="w-3/5" h="h-1.5" />
          <div className="mt-auto h-6 rounded-md bg-brand-700" />
        </div>
      </div>
    </div>
  );
}

function Menu() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex gap-3`}>
        {/* category sidebar */}
        <div className="flex w-16 flex-col gap-2">
          {[0, 1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className={`h-2.5 rounded-full ${i === 1 ? "bg-brand-700 w-full" : "bg-gray-200 w-4/5"}`}
            />
          ))}
        </div>
        {/* item cards w/ image box + price line */}
        <div className="grid flex-1 grid-cols-2 gap-2.5">
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="flex gap-2 rounded-lg border border-gray-200 bg-white p-2">
              <div className="h-10 w-10 shrink-0 rounded-md bg-gray-100" />
              <div className="flex flex-1 flex-col justify-center gap-1.5">
                <Bar w="w-full" h="h-1.5" />
                <Bar w="w-1/2" h="h-1.5" tone="bg-brand-300" />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function List() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex flex-col gap-3`}>
        {/* search bar */}
        <div className="flex items-center gap-2 rounded-lg bg-white px-3 py-2 shadow-sm">
          <div className="h-3 w-3 rounded-full border-2 border-gray-300" />
          <Bar w="w-1/3" h="h-2" />
          <div className="ms-auto h-5 w-14 rounded-md bg-brand-700" />
        </div>
        {/* rows */}
        <div className="flex flex-1 flex-col gap-2">
          {[0, 1, 2, 3].map((i) => (
            <div
              key={i}
              className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2"
            >
              <div className="h-6 w-6 rounded-full bg-brand-100" />
              <div className="flex flex-1 flex-col gap-1.5">
                <Bar w="w-1/2" h="h-1.5" />
                <Bar w="w-1/3" h="h-1.5" />
              </div>
              <div className="h-2 w-10 rounded-full bg-gray-200" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Dashboard() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex flex-col gap-3`}>
        {/* KPI cards */}
        <div className="grid grid-cols-3 gap-2.5">
          {[0, 1, 2].map((i) => (
            <div key={i} className="rounded-lg border border-gray-200 bg-white p-2">
              <Bar w="w-2/3" h="h-1.5" />
              <div className={`mt-2 h-3 w-1/2 rounded ${i === 0 ? "bg-brand-700" : "bg-gray-300"}`} />
            </div>
          ))}
        </div>
        {/* chart block */}
        <div className="flex flex-1 items-end gap-1.5 rounded-lg border border-gray-200 bg-white p-2.5">
          {[55, 70, 45, 85, 60, 95, 75].map((h, i) => (
            <div
              key={i}
              className="flex-1 rounded-t"
              style={{ height: `${h}%`, background: `rgba(15,110,86,${0.25 + i * 0.09})` }}
            />
          ))}
        </div>
        {/* table */}
        <div className="flex flex-col gap-1.5 rounded-lg border border-gray-200 bg-white p-2">
          {[0, 1].map((i) => (
            <div key={i} className="flex items-center gap-2">
              <Bar w="w-1/3" h="h-1.5" />
              <Bar w="w-1/4" h="h-1.5" />
              <div className="ms-auto h-1.5 w-10 rounded-full bg-brand-200" />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Form() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex flex-col gap-3 rounded-lg bg-white p-4 shadow-sm`}>
        <div className="h-2.5 w-24 rounded-full bg-brand-700" />
        {[0, 1, 2].map((i) => (
          <div key={i} className="flex flex-col gap-1.5">
            <Bar w="w-20" h="h-1.5" />
            <div className="h-7 w-full rounded-md border border-gray-200 bg-gray-50" />
          </div>
        ))}
        <div className="mt-auto flex justify-end gap-2">
          <div className="h-7 w-16 rounded-md border border-gray-200" />
          <div className="h-7 w-20 rounded-md bg-brand-700" />
        </div>
      </div>
    </div>
  );
}

function Phone() {
  return (
    <div className={FRAME}>
      <div className={`${ASPECT} flex items-center justify-center`}>
        <div className="flex h-full w-40 flex-col gap-2 rounded-[1.5rem] border-4 border-gray-300 bg-white p-2.5">
          {/* notch */}
          <div className="mx-auto h-1.5 w-10 rounded-full bg-gray-300" />
          {/* header */}
          <div className="flex items-center gap-2 rounded-lg bg-brand-50 p-1.5">
            <div className="h-5 w-5 rounded-md bg-brand-700" />
            <div className="flex flex-col gap-1">
              <Bar w="w-14" h="h-1.5" />
              <Bar w="w-8" h="h-1" />
            </div>
          </div>
          {/* menu cards */}
          <div className="grid flex-1 grid-cols-2 gap-1.5">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="flex flex-col gap-1 rounded-md border border-gray-200 p-1">
                <div className="h-6 flex-1 rounded bg-gray-100" />
                <Bar w="w-full" h="h-1" />
                <Bar w="w-1/2" h="h-1" tone="bg-brand-300" />
              </div>
            ))}
          </div>
          {/* bottom bar */}
          <div className="h-6 rounded-lg bg-brand-700" />
        </div>
      </div>
    </div>
  );
}

const VARIANTS: Record<WireframeVariant, () => React.JSX.Element> = {
  board: Board,
  order: Order,
  menu: Menu,
  list: List,
  dashboard: Dashboard,
  form: Form,
  phone: Phone,
};

export function Wireframe({ variant }: { variant: WireframeVariant }) {
  const Component = VARIANTS[variant];
  return <Component />;
}
