import { X } from 'lucide-react'
import { cn } from '@/lib/utils'

interface SyntaxHelpPanelProps {
  open: boolean
  onClose: () => void
}

export function SyntaxHelpPanel({ open, onClose }: SyntaxHelpPanelProps) {
  if (!open) return null

  return (
    <div className="flex h-full flex-col border-l border-border bg-card">
      <div className="flex items-center justify-between border-b border-border px-3 py-2">
        <span className="text-xs font-medium text-muted-foreground">Syntax Reference</span>
        <button
          onClick={onClose}
          className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-muted-foreground"
        >
          <X className="h-3.5 w-3.5" />
        </button>
      </div>
      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-muted-foreground">
        <Section title="Node Structure">
          <Code>{`---
id: node_id
type: decision|action|solution
parent: parent_id
---`}</Code>
        </Section>

        <Section title="Decision Node">
          <Code>{`# Question text here

> Help text (blockquote)

- [A] Option label → @target_id
- [B] Another option → @target_id`}</Code>
        </Section>

        <Section title="Action Node">
          <Code>{`## Action Title

Description paragraph.

\`\`\`commands
ping 8.8.8.8
tracert gateway
\`\`\`

**Expected:** Expected outcome

→ @next_node_id`}</Code>
        </Section>

        <Section title="Solution Node">
          <Code>{`## Solution Title

Description paragraph.

1. Resolution step one
2. Resolution step two`}</Code>
        </Section>

        <Section title="Variables">
          <Row label="User input" code="[USER_INPUT:prompt]" />
          <Row label="Reference" code="[VAR:name]" />
          <Row label="Save value" code="[SAVE_AS:name]" />
        </Section>

        <Section title="Keyboard Shortcuts">
          <Row label="Toggle mode" code="Ctrl+Shift+M" />
          <Row label="Insert Decision" code="Ctrl+Shift+D" />
          <Row label="Insert Action" code="Ctrl+Shift+A" />
          <Row label="Insert Solution" code="Ctrl+Shift+S" />
        </Section>
      </div>
    </div>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="mb-4">
      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</h4>
      {children}
    </div>
  )
}

function Code({ children }: { children: string }) {
  return (
    <pre className={cn(
      'mb-2 overflow-x-auto rounded-md border border-border bg-card px-2 py-1.5',
      'text-[10px] leading-relaxed text-muted-foreground whitespace-pre'
    )}>
      {children}
    </pre>
  )
}

function Row({ label, code }: { label: string; code: string }) {
  return (
    <div className="flex items-center justify-between py-0.5">
      <span className="text-muted-foreground">{label}</span>
      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
    </div>
  )
}
