import { For } from "solid-js";
import { Calendar } from "pettyui/calendar";
import { DataTable } from "pettyui/data-table";
import { VirtualList } from "pettyui/virtual-list";
import { ComponentDemo } from "../component-demo";

const cellCls = "px-3 py-2 text-sm text-gray-700 border-b border-gray-100";
const headCls = "px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wide border-b border-gray-200 bg-gray-50 text-left";

type Person = { id: number; name: string; role: string; status: string };

const people: Person[] = [
  { id: 1, name: "Alice Chen", role: "Engineer", status: "Active" },
  { id: 2, name: "Bob Kim", role: "Designer", status: "Active" },
  { id: 3, name: "Carol Diaz", role: "Manager", status: "Away" },
  { id: 4, name: "Dan Park", role: "Engineer", status: "Active" },
  { id: 5, name: "Eva Müller", role: "Product", status: "Inactive" },
];

const tableColumns = [
  { id: "name", header: "Name", sortable: true, cell: (r: Person) => <span>{r.name}</span> },
  { id: "role", header: "Role", sortable: true, cell: (r: Person) => <span>{r.role}</span> },
  { id: "status", header: "Status", sortable: false, cell: (r: Person) => <span>{r.status}</span> },
];

/** Calendar demo showing a navigable month grid. */
function CalendarDemo() {
  const navBtn = "w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm";
  const content = (
    <Calendar class="w-72 border border-gray-200 rounded-lg p-3 bg-white shadow-sm">
      <Calendar.Header class="flex items-center justify-between mb-2">
        <Calendar.Nav class="flex items-center gap-1">
          <Calendar.PrevButton class={navBtn}>‹</Calendar.PrevButton>
          <Calendar.NextButton class={navBtn}>›</Calendar.NextButton>
        </Calendar.Nav>
        <Calendar.Heading class="text-sm font-semibold text-gray-800" />
      </Calendar.Header>
      <Calendar.Grid class="w-full border-collapse">
        <Calendar.GridHead class="[&_th]:text-xs [&_th]:text-gray-400 [&_th]:font-medium [&_th]:pb-1 [&_th]:text-center" />
        <Calendar.GridBody class="[&_td]:text-center [&_td]:p-0.5 [&_td]:text-sm [&_td]:rounded [&_td]:cursor-pointer [&_td:hover]:bg-indigo-50 [&_td[data-selected]]:bg-indigo-600 [&_td[data-selected]]:text-white [&_td[data-today]]:font-bold [&_td[data-outside-month]]:text-gray-300" />
      </Calendar.Grid>
    </Calendar>
  );
  return content;
}

/** DataTable demo with sortable columns and 5 sample rows. */
function DataTableDemo() {
  const content = (
    <div class="w-full overflow-x-auto rounded-lg border border-gray-200">
      <DataTable data={people} columns={tableColumns} pageSize={5}>
        <table class="w-full">
          <thead>
            <tr>
              <For each={tableColumns}>
                {(col) => <th class={headCls}>{col.header}</th>}
              </For>
            </tr>
          </thead>
          <DataTable.Body />
        </table>
      </DataTable>
    </div>
  );
  return content;
}

const ITEM_COUNT = 10000;
const ITEM_HEIGHT = 36;

/** VirtualList demo rendering 10 000 items with windowed scroll. */
function VirtualListDemo() {
  const content = (
    <div class="w-full max-w-sm border border-gray-200 rounded-lg overflow-hidden">
      <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 text-xs text-gray-500">
        {ITEM_COUNT.toLocaleString()} items — only visible rows are rendered
      </div>
      <VirtualList
        count={ITEM_COUNT}
        estimateSize={ITEM_HEIGHT}
        style={{ height: "240px" }}
        class="w-full"
      >
        {(item) => (
          <div class="flex items-center px-3 h-9 text-sm border-b border-gray-100 last:border-0">
            <span class="text-gray-400 w-16 text-xs">#{item.index + 1}</span>
            <span class="text-gray-700">Item {item.index + 1}</span>
          </div>
        )}
      </VirtualList>
    </div>
  );
  return content;
}

/** Data section with calendar, table, and virtual list components. */
export function DataSection() {
  const content = (
    <>
      <ComponentDemo name="Calendar" description="Navigable month grid for selecting dates with keyboard and locale support">
        <CalendarDemo />
      </ComponentDemo>
      <ComponentDemo name="DataTable" description="Sortable, filterable table with pagination and row selection">
        <DataTableDemo />
      </ComponentDemo>
      <ComponentDemo name="VirtualList" description="Windowed scroll container that renders only visible items for large datasets">
        <VirtualListDemo />
      </ComponentDemo>
    </>
  );
  return content;
}
