// Radix UI: Dropdown без стилей
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

function MyDropdown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="my-trigger-styles">Опции ▾</button>
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content className="my-menu-styles">
          <DropdownMenu.Item className="my-item-styles" onSelect={() => edit()}>
            Редактировать
          </DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item className="my-danger-styles" onSelect={() => del()}>
            Удалить
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  )
}

// Пример: Tab компонент в стиле Compound

// Контекст для передачи состояния между компонентами
const TabContext = createContext(null)

// Корневой компонент
function Tabs({ defaultValue, children }) {
  const [active, setActive] = useState(defaultValue)
  return (
    <TabContext.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabContext.Provider>
  )
}

// Подкомпоненты через точечную нотацию
function TabList({ children }) {
  return <div role="tablist">{children}</div>
}

function Tab({ value, children }) {
  const { active, setActive } = useContext(TabContext)
  return (
    <button
      role="tab"
      aria-selected={active === value}
      onClick={() => setActive(value)}
    >
      {children}
    </button>
  )
}

function TabPanel({ value, children }) {
  const { active } = useContext(TabContext)
  if (active !== value) return null
  return <div role="tabpanel">{children}</div>
}

// Точечная нотация — удобный API
Tabs.List = TabList
Tabs.Tab = Tab
Tabs.Panel = TabPanel

// Использование — декларативно и понятно!
function App() {
  return (
    <Tabs defaultValue="overview">
      <Tabs.List>
        <Tabs.Tab value="overview">Обзор</Tabs.Tab>
        <Tabs.Tab value="details">Детали</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="overview">Обзорная информация...</Tabs.Panel>
      <Tabs.Panel value="details">Детальная информация...</Tabs.Panel>
    </Tabs>
  )
}

// Accordion с полным контролем над разметкой
const AccordionContext = createContext(null)

function Accordion({ children, allowMultiple = false }) {
  const [openItems, setOpenItems] = useState(new Set())

  const toggle = (id) => {
    setOpenItems(prev => {
      const next = new Set(allowMultiple ? prev : [])
      prev.has(id) ? next.delete(id) : next.add(id)
      return next
    })
  }

  return (
    <AccordionContext.Provider value={{ openItems, toggle }}>
      <div className="accordion">{children}</div>
    </AccordionContext.Provider>
  )
}

function AccordionItem({ id, children }) {
  const { openItems, toggle } = useContext(AccordionContext)
  const isOpen = openItems.has(id)

  return (
    <div className="accordion-item">
      <button
        aria-expanded={isOpen}
        aria-controls={`panel-${id}`}
        onClick={() => toggle(id)}
      >
        {children[0]}  {/* заголовок */}
      </button>
      <div
        id={`panel-${id}`}
        role="region"
        hidden={!isOpen}
      >
        {children[1]}  {/* содержимое */}
      </div>
    </div>
  )
}

// Компонент Card со слотами
function Card({ slots }) {
  return (
    <div className="card">
      <div className="card__header">{slots.header}</div>
      <div className="card__body">{slots.body}</div>
      <div className="card__footer">{slots.footer}</div>
    </div>
  )
}

// Использование
<Card slots={{
  header: <h2>Заголовок</h2>,
  body: <p>Основной контент</p>,
  footer: <button>Действие</button>,
}} />

// Или через children.filter() / React.Children.toArray
function Dialog({ children }) {
  const title = React.Children.toArray(children).find(
    c => c.type === Dialog.Title
  )
  const body = React.Children.toArray(children).find(
    c => c.type === Dialog.Body
  )
  return (
    <div role="dialog">
      <header>{title}</header>
      <main>{body}</main>
    </div>
  )
}

// Uncontrolled: состояние внутри компонента
function UncontrolledInput() {
  const [value, setValue] = useState('')
  return <input value={value} onChange={e => setValue(e.target.value)} />
}

// Controlled: состояние снаружи, полный контроль
function ControlledInput({ value, onChange }) {
  return <input value={value} onChange={e => onChange(e.target.value)} />
}

// Паттерн "управляемое с откатом" — поддерживает оба варианта
function SmartDropdown({ value: controlledValue, onChange, defaultValue }) {
  const isControlled = controlledValue !== undefined
  const [internalValue, setInternalValue] = useState(defaultValue)

  const value = isControlled ? controlledValue : internalValue

  const handleChange = (newValue) => {
    if (!isControlled) setInternalValue(newValue)
    onChange?.(newValue)
  }

  return <select value={value} onChange={e => handleChange(e.target.value)} />
}