import { 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-[selected]:border-indigo-600 data-[selected]: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-[selected]:border-indigo-600 data-[selected]: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-[selected]:border-indigo-600 data-[selected]: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 content = <Pagination count={50} itemsPerPage={10} class="flex items-center gap-1" />;
  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;
}

/** Wizard step indicators helper for the wizard demo. */
function WizardSteps() {
  const content = (
    <Wizard.StepList class="flex items-center gap-2 mb-4">
      <For each={["Details", "Review", "Confirm"]}>
        {(label, i) => (
          <Wizard.Step index={i()} 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-[active]:border-indigo-600 data-[active]:text-indigo-600 data-[completed]:bg-indigo-600 data-[completed]:text-white data-[completed]:border-indigo-600 border-gray-300 text-gray-400">
              {i() + 1}
            </Wizard.StepTrigger>
            <span class="text-sm text-gray-600">{label}</span>
          </Wizard.Step>
        )}
      </For>
    </Wizard.StepList>
  );
  return content;
}

/** Wizard demo with 3-step flow. */
function WizardDemo() {
  const content = (
    <Wizard class="w-full max-w-md">
      <WizardSteps />
      <Wizard.StepContent index={0} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 1: Enter your details here.</Wizard.StepContent>
      <Wizard.StepContent index={1} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 2: Review your information.</Wizard.StepContent>
      <Wizard.StepContent index={2} class="p-4 border border-gray-200 rounded mb-4 text-sm text-gray-700">Step 3: Confirm and submit.</Wizard.StepContent>
      <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;
}
