import '@krackedui/motion/styles.css';

import { useState } from 'react';
import {
  AppFrame, Topbar, BreadcrumbTrail, PageLayout, PageCover, PageHeader, SidePeek,
  PeekBody, PeekProperties, PeekProperty, PeekComments,
  Sidebar, WorkspaceMenu, HelpMenu, AppsMenu, Icon,
} from '@krackedui/motion';

function AppSidebar() {
  return (
    <Sidebar.Root
      header={<><Sidebar.Search /><Sidebar.Tabs /></>}
      footer={<Sidebar.InviteCard />}
      bottomBar={
        <Sidebar.BottomBar>
          <WorkspaceMenu email="ada@example.com" workspaces={[{ id: 'w1', name: 'Design Team' }]} currentId="w1">
            <Sidebar.WorkspaceSwitcher name="Design Team" />
          </WorkspaceMenu>
          <HelpMenu releases={[{ id: 'r1', title: 'Release 3.8', isNew: true }, { id: 'r2', title: 'Release 3.7' }]}>
            <Sidebar.BarButton icon="questionMarkCircle" label="Help, contact, more…" dot />
          </HelpMenu>
          <AppsMenu trash={[{ id: 't1', title: 'Old meeting notes', path: 'Team wiki' }]}>
            <Sidebar.BarButton icon="circleGrid2X2" label="Library, Trash, more…" />
          </AppsMenu>
        </Sidebar.BottomBar>
      }
    >
      <Sidebar.Group>
        <Sidebar.Item icon="chatBubblePlus" actions={<Sidebar.Action icon="ellipsisSmall" label="Open shortcut menu" />}>New chat</Sidebar.Item>
        <Sidebar.Item icon="bookshelf">Library</Sidebar.Item>
      </Sidebar.Group>
      <Sidebar.Sections>
        <Sidebar.Section title="Shared" actions={<Sidebar.Action icon="plusSmall" label="Add a page" />}>
          <Sidebar.Item tone="secondary" icon={<Icon name="plus" size={16} />}>Start collaborating</Sidebar.Item>
        </Sidebar.Section>
        <Sidebar.Section title="Private" actions={<Sidebar.Action icon="plusSmall" label="Add a page" />}>
          <Sidebar.Tree label="Private pages">
            <Sidebar.TreeItem label="Team wiki" active defaultExpanded>
              <Sidebar.TreeItem label="Tasks" icon={<Icon name="viewTable" size={20} />} />
            </Sidebar.TreeItem>
            <Sidebar.TreeItem label="Q4 roadmap" />
            <Sidebar.TreeItem label="Meeting notes" />
            <Sidebar.TreeItem label="Product specs" />
          </Sidebar.Tree>
        </Sidebar.Section>
      </Sidebar.Sections>
      <Sidebar.ScrollFooter>
        <Sidebar.Item tone="muted" icon="sliders">Customize sidebar</Sidebar.Item>
      </Sidebar.ScrollFooter>
    </Sidebar.Root>
  );
}

function TaskPeek() {
  return (
    <PeekBody
      header={<PageHeader size="peek" title="Sidebar rebuild" extraControls={null} />}
      properties={
        <PeekProperties>
          <PeekProperty icon="calendarDate15" label="Due">October 9, 2026</PeekProperty>
          <PeekProperty icon="arrowInCircleDown" label="Priority">High</PeekProperty>
          <PeekProperty icon="checkmarkCircle" label="Status" />
        </PeekProperties>
      }
      comments={<PeekComments />}
    >
      <div className="pl-2 text-n-text-tertiary">Press ‘enter’ to continue with an empty page.</div>
    </PeekBody>
  );
}

export function App() {
  const [peek, setPeek] = useState(false);
  return (
    <div className="motion-root h-dvh w-full">
      <AppFrame
        sidebar={<AppSidebar />}
        topbar={
          <Topbar
            breadcrumbs={<BreadcrumbTrail items={[{ title: 'Team wiki' }, { title: 'Q4 roadmap', icon: '🗺️' }]} />}
            edited="Edited 2m ago"
            onShare={() => setPeek(true)}
          />
        }
        peek={<SidePeek open={peek} onClose={() => setPeek(false)}><TaskPeek /></SidePeek>}
      >
        <PageLayout
          toc={[
            { id: 'goals', label: 'Goals', level: 1 },
            { id: 'milestones', label: 'Milestones', level: 2 },
            { id: 'risks', label: 'Risks', level: 2 },
          ]}
          cover={
            <PageCover>
              <div className="size-full" style={{ background: 'linear-gradient(120deg, var(--n-blue-bg-accent-secondary), var(--n-bg-tertiary))' }} />
            </PageCover>
          }
          header={<PageHeader title="Q4 roadmap" />}
        >
          <div className="flex flex-col gap-2 px-2 text-[16px] leading-6">
            <div id="goals" className="pt-6 text-[30px] font-semibold leading-[39px]">Goals</div>
            <p>Ship the redesigned onboarding, the new billing page and the Q4 roadmap review.</p>
            <div id="milestones" className="pt-4 text-[24px] font-semibold leading-[31px]">Milestones</div>
            <p>Design review on Oct 20, beta on Nov 3, general availability on Dec 1.</p>
          </div>
        </PageLayout>
      </AppFrame>
    </div>
  );
}