import { createSignal } from 'solid-js';
import {
  Button,
  TextInput,
  Label,
  Toggle,
  Slider,
  Panel,
  Dropdown,
  Table,
} from './ui';

/**
 * ComponentDemo -- showcase of all 8 core UI components.
 *
 * Visual proof that Phase 3 is complete: every component renders
 * with representative states, responds to interaction, and updates
 * on theme switch.
 */
export function ComponentDemo() {
  const [toggleOn, setToggleOn] = createSignal(false);
  const [sliderVal, setSliderVal] = createSignal(50);
  const [selectedOption, setSelectedOption] = createSignal('');
  const [inputVal, setInputVal] = createSignal('');

  // Sample table data
  const tableData = [
    { id: 1, name: 'Neural Core', type: 'Processor', status: 'Active', power: 95 },
    { id: 2, name: 'Holo Matrix', type: 'Display', status: 'Standby', power: 42 },
    { id: 3, name: 'Cryo Cache', type: 'Storage', status: 'Active', power: 78 },
    { id: 4, name: 'Flux Router', type: 'Network', status: 'Offline', power: 0 },
    { id: 5, name: 'Photon Drive', type: 'Engine', status: 'Active', power: 88 },
  ];

  return (
    <section class="space-y-8">
      <h2 class="text-xl font-bold text-secondary font-display hh-divider-glow">
        Component Library
      </h2>

      {/* === Buttons === */}
      <Panel>
        <h3 class="font-display text-secondary text-lg hh-divider-glow">Buttons</h3>
        {/* Row 1: Variants */}
        <div class="flex flex-wrap gap-3 mb-4">
          <Button variant="primary">Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="ghost">Ghost</Button>
        </div>
        {/* Row 2: Sizes */}
        <div class="flex flex-wrap items-center gap-3 mb-4">
          <Button size="sm">Small</Button>
          <Button size="md">Medium</Button>
          <Button size="lg">Large</Button>
        </div>
        {/* Row 3: States */}
        <div class="flex flex-wrap gap-3 mb-4">
          <Button disabled>Disabled</Button>
          <Button loading>Loading</Button>
        </div>
        {/* Row 4: Semantic colors */}
        <div class="flex flex-wrap gap-3">
          <Button color="success">Success</Button>
          <Button color="error">Error</Button>
          <Button color="warning">Warning</Button>
          <Button color="info">Info</Button>
        </div>
      </Panel>

      {/* === Inputs === */}
      <Panel>
        <h3 class="font-display text-secondary text-lg hh-divider-glow">Text Inputs</h3>
        <div class="grid grid-cols-2 gap-4">
          <div class="space-y-2">
            <Label for="demo-text">Standard Input</Label>
            <TextInput
              id="demo-text"
              placeholder="Type here..."
              value={inputVal()}
              onInput={(e) => setInputVal(e.currentTarget.value)}
            />
          </div>
          <div class="space-y-2">
            <Label for="demo-password">Password</Label>
            <TextInput id="demo-password" inputType="password" placeholder="Enter password..." />
          </div>
          <div class="space-y-2">
            <Label for="demo-search">Search</Label>
            <TextInput id="demo-search" inputType="search" placeholder="Search..." />
          </div>
          <div class="space-y-2">
            <Label for="demo-error">Error State</Label>
            <TextInput id="demo-error" error placeholder="Invalid input" />
          </div>
        </div>
      </Panel>

      {/* === Toggle & Slider === */}
      <Panel>
        <h3 class="font-display text-secondary text-lg hh-divider-glow">Controls</h3>
        <div class="grid grid-cols-2 gap-8">
          <div class="space-y-4">
            <Label font="display">Toggle Switches</Label>
            <div class="flex items-center gap-4">
              <Toggle checked={toggleOn()} onChange={setToggleOn} label="System Active" />
              <span class="text-text-muted text-sm font-mono">{toggleOn() ? 'ON' : 'OFF'}</span>
            </div>
            <div class="flex items-center gap-4">
              <Toggle disabled label="Locked" />
            </div>
          </div>
          <div class="space-y-4">
            <Label font="display">Slider</Label>
            <Slider value={sliderVal()} onChange={setSliderVal} min={0} max={100} />
            <span class="text-text-muted text-sm font-mono">Value: {sliderVal()}</span>
            <Slider disabled value={30} min={0} max={100} />
          </div>
        </div>
      </Panel>

      {/* === Dropdown === */}
      <Panel>
        <h3 class="font-display text-secondary text-lg hh-divider-glow">Dropdown</h3>
        <div class="flex items-center gap-4">
          <Dropdown
            options={[
              { value: 'neural', label: 'Neural Processing' },
              { value: 'quantum', label: 'Quantum Compute' },
              { value: 'optical', label: 'Optical Array' },
              { value: 'bio', label: 'Bio Interface', disabled: true },
            ]}
            value={selectedOption()}
            onChange={setSelectedOption}
            placeholder="Select system..."
          />
          <span class="text-text-muted text-sm font-mono">
            Selected: {selectedOption() || 'none'}
          </span>
        </div>
      </Panel>

      {/* === Table === */}
      <Panel>
        <h3 class="font-display text-secondary text-lg hh-divider-glow">Data Table</h3>
        <Table
          columns={[
            { key: 'id', header: 'ID', sortable: true, width: '60px' },
            { key: 'name', header: 'Component', sortable: true },
            { key: 'type', header: 'Type', sortable: true },
            { key: 'status', header: 'Status', sortable: true },
            { key: 'power', header: 'Power %', sortable: true, width: '100px' },
          ]}
          data={tableData}
        />
      </Panel>

      {/* === Labels === */}
      <Panel>
        <h3 class="font-display text-secondary text-lg hh-divider-glow">Labels & Typography</h3>
        <div class="space-y-2">
          <Label font="mono" size="sm">Monospace Small</Label>
          <Label font="mono" size="md">Monospace Medium</Label>
          <Label font="mono" size="lg">Monospace Large</Label>
          <Label font="display" size="sm">Display Small</Label>
          <Label font="display" size="md">Display Medium</Label>
          <Label font="display" size="lg">Display Large</Label>
        </div>
      </Panel>
    </section>
  );
}