import { createSignal, For } from "solid-js";
import { Link } from "pettyui/link";
import { Breadcrumbs } from "pettyui/breadcrumbs";
import { Tabs } from "pettyui/tabs";
import { Accordion } from "pettyui/accordion";
import { Collapsible } from "pettyui/collapsible";
import { Pagination } from "pettyui/pagination";
import { NavigationMenu } from "pettyui/navigation-menu";
import { Wizard } from "pettyui/wizard";
import { ComponentDemo } from "../component-demo";

/** Link demo with internal, external, and disabled variants. */
function LinkDemo() {
  const content = (
    <div class="flex items-center gap-4">
      <Link href="#" class="text-sm text-indigo-600 hover:underline">Internal link</Link>
      <Link href="https://example.com" external class="text-sm text-indigo-600 hover:underline">External link ↗</Link>
      <Link href="#" disabled class="text-sm text-gray-400 cursor-not-allowed">Disabled link</Link>
    </div>
  );
  return content;
}

/** Breadcrumbs demo with 3-level trail. */
function BreadcrumbsDemo() {
  const content = (
    <Breadcrumbs class="flex items-center gap-1 text-sm">
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="#" class="text-gray-500 hover:text-gray-700">Home</Breadcrumbs.Link>
        <Breadcrumbs.Separator class="text-gray-300 mx-1">/</Breadcrumbs.Separator>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="#" class="text-gray-500 hover:text-gray-700">Components</Breadcrumbs.Link>
        <Breadcrumbs.Separator class="text-gray-300 mx-1">/</Breadcrumbs.Separator>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <span class="text-gray-900 font-medium">Breadcrumbs</span>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
  return content;
}

/** Tabs demo with 3 content panels. */
function TabsDemo() {
  const content = (
    <Tabs defaultValue="tab-1" class="w-full">
      <Tabs.List class="flex border-b border-gray-200">
        <Tabs.Tab value="tab-1" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Account</Tabs.Tab>
        <Tabs.Tab value="tab-2" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Password</Tabs.Tab>
        <Tabs.Tab value="tab-3" class="px-4 py-2 text-sm border-b-2 -mb-px transition-colors data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 border-transparent text-gray-500 hover:text-gray-700">Settings</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="tab-1" class="p-4 text-sm text-gray-700">Account settings content</Tabs.Panel>
      <Tabs.Panel value="tab-2" class="p-4 text-sm text-gray-700">Password settings content</Tabs.Panel>
      <Tabs.Panel value="tab-3" class="p-4 text-sm text-gray-700">General settings content</Tabs.Panel>
    </Tabs>
  );
  return content;
}

const accordionItems = [
  { value: "item-1", title: "What is PettyUI?", content: "A headless SolidJS component library." },
  { value: "item-2", title: "Is it accessible?", content: "Yes, all components follow WAI-ARIA patterns." },
  { value: "item-3", title: "Can I style it?", content: "Absolutely. It's headless — bring your own styles." },
];

/** Accordion demo with 3 collapsible sections. */
function AccordionDemo() {
  const content = (
    <Accordion class="w-full max-w-md border border-gray-200 rounded divide-y divide-gray-200">
      <For each={accordionItems}>
        {(item) => (
          <Accordion.Item value={item.value}>
            <Accordion.Header>
              <Accordion.Trigger class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50">
                {item.title}
                <span class="text-gray-400">▾</span>
              </Accordion.Trigger>
            </Accordion.Header>
            <Accordion.Content class="px-4 pb-3 text-sm text-gray-500">{item.content}</Accordion.Content>
          </Accordion.Item>
        )}
      </For>
    </Accordion>
  );
  return content;
}

/** Collapsible demo with expand/collapse toggle. */
function CollapsibleDemo() {
  const content = (
    <Collapsible class="w-full max-w-md">
      <Collapsible.Trigger class="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900">
        <span>▶</span> Show more details
      </Collapsible.Trigger>
      <Collapsible.Content class="mt-2 p-3 bg-gray-50 rounded text-sm text-gray-600">
        Here are the additional details that were hidden. Click again to collapse.
      </Collapsible.Content>
    </Collapsible>
  );
  return content;
}

/** Pagination demo with page navigation. */
function PaginationDemo() {
  const [page, setPage] = createSignal(1);
  const content = (
    <Pagination page={page()} totalPages={5} onPageChange={setPage} class="flex items-center gap-1">
      <Pagination.Previous class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Prev</Pagination.Previous>
      <Pagination.Items>
        {(item) => (
          <button
            type="button"
            class={`px-2 py-1 text-sm rounded ${item.isActive ? "bg-indigo-600 text-white" : "hover:bg-indigo-50 cursor-pointer"} ${item.type === "ellipsis" ? "cursor-default" : ""}`}
            onClick={() => { if (item.page) setPage(item.page); }}
            disabled={item.type === "ellipsis"}
          >
            {item.type === "ellipsis" ? "..." : item.page}
          </button>
        )}
      </Pagination.Items>
      <Pagination.Next class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Next</Pagination.Next>
    </Pagination>
  );
  return content;
}

/** NavigationMenu demo with dropdown submenu. */
function NavigationMenuDemo() {
  const content = (
    <NavigationMenu class="relative">
      <NavigationMenu.List class="flex items-center gap-1">
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Home</NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">Products ▾</NavigationMenu.Trigger>
          <NavigationMenu.Content class="absolute top-full left-0 mt-1 p-2 border border-gray-200 rounded bg-white shadow-lg z-10 min-w-48">
            <NavigationMenu.Link href="#" class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-indigo-50 rounded">Widget A</NavigationMenu.Link>
            <NavigationMenu.Link href="#" class="block px-3 py-1.5 text-sm text-gray-700 hover:bg-indigo-50 rounded">Widget B</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="#" class="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded">About</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu>
  );
  return content;
}

const wizardSteps = ["Details", "Review", "Confirm"];

/** Wizard demo with 3-step flow. */
function WizardDemo() {
  const content = (
    <Wizard class="w-full max-w-md">
      <Wizard.StepList class="flex items-center gap-4 mb-4">
        <For each={wizardSteps}>
          {(label, i) => (
            <Wizard.Step index={i()}>
              <div class="flex items-center gap-2">
                <Wizard.StepTrigger class="w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-medium data-[state=active]:border-indigo-600 data-[state=active]:text-indigo-600 data-[state=completed]:bg-indigo-600 data-[state=completed]:text-white data-[state=completed]:border-indigo-600 border-gray-300 text-gray-400">
                  {i() + 1}
                </Wizard.StepTrigger>
                <span class="text-sm text-gray-600">{label}</span>
              </div>
              <Wizard.StepContent class="p-4 border border-gray-200 rounded my-4 text-sm text-gray-700">
                Step {i() + 1}: {label}
              </Wizard.StepContent>
            </Wizard.Step>
          )}
        </For>
      </Wizard.StepList>
      <div class="flex gap-2">
        <Wizard.Prev class="px-3 py-1.5 text-sm border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-40">Previous</Wizard.Prev>
        <Wizard.Next class="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-40">Next</Wizard.Next>
      </div>
    </Wizard>
  );
  return content;
}

/** Navigation section with all navigation components. */
export function NavigationSection() {
  const content = (
    <>
      <ComponentDemo name="Link" description="Navigation anchor element with external link and disabled support">
        <LinkDemo />
      </ComponentDemo>
      <ComponentDemo name="Breadcrumbs" description="Navigation trail showing the current page location within a hierarchy">
        <BreadcrumbsDemo />
      </ComponentDemo>
      <ComponentDemo name="Tabs" description="Tabbed interface for switching between different views or sections of content">
        <TabsDemo />
      </ComponentDemo>
      <ComponentDemo name="Accordion" description="Vertically stacked sections that expand/collapse to show content">
        <AccordionDemo />
      </ComponentDemo>
      <ComponentDemo name="Collapsible" description="Content section that can be expanded or collapsed with a trigger">
        <CollapsibleDemo />
      </ComponentDemo>
      <ComponentDemo name="Pagination" description="Navigation for paginated content with page numbers and controls">
        <PaginationDemo />
      </ComponentDemo>
      <ComponentDemo name="NavigationMenu" description="Horizontal navigation bar with dropdown submenus">
        <NavigationMenuDemo />
      </ComponentDemo>
      <ComponentDemo name="Wizard" description="Multi-step flow with step indicators and navigation">
        <WizardDemo />
      </ComponentDemo>
    </>
  );
  return content;
}
