'use client'
import React, { useState } from 'react'
import { Button } from '@/components/ui/Button'

interface HowToStep {
  number: number
  instruction: string
}

interface HowToContent {
  type: 'how_to'
  steps: HowToStep[]
}

interface Props {
  content: HowToContent
  onComplete: () => void
}

export function HowTo({ content, onComplete }: Props) {
  const [checked, setChecked] = useState<Set<number>>(new Set())
  const allDone = checked.size === content.steps.length

  function toggle(num: number) {
    setChecked((prev) => {
      const next = new Set(prev)
      if (next.has(num)) {
        next.delete(num)
      } else {
        next.add(num)
      }
      return next
    })
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--s-2)' }}>
        {content.steps.map((step) => {
          const done = checked.has(step.number)
          return (
            <li key={step.number}>
              <button
                onClick={() => toggle(step.number)}
                style={{
                  width: '100%',
                  background: done ? 'var(--bg-warm)' : 'var(--bg)',
                  border: '1.5px solid var(--cream)',
                  borderRadius: 'var(--r-sm)',
                  padding: 'var(--s-3) var(--s-4)',
                  textAlign: 'left',
                  fontSize: 'var(--t-body)',
                  color: done ? 'var(--fg-muted)' : 'var(--fg)',
                  fontFamily: 'var(--font-sans)',
                  cursor: 'pointer',
                  minHeight: '44px',
                  display: 'flex',
                  gap: 'var(--s-3)',
                  alignItems: 'flex-start',
                  transition: 'background 150ms',
                }}
              >
                <span
                  style={{
                    width: '28px',
                    height: '28px',
                    borderRadius: '50%',
                    background: done ? 'var(--success)' : 'var(--cream)',
                    color: done ? 'var(--teal-900)' : 'var(--fg-muted)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 'var(--t-small)',
                    fontWeight: 700,
                    flexShrink: 0,
                  }}
                >
                  {done ? '✓' : step.number}
                </span>
                <span style={{ textDecoration: done ? 'line-through' : 'none', lineHeight: 1.6 }}>
                  {step.instruction}
                </span>
              </button>
            </li>
          )
        })}
      </ol>

      {allDone && (
        <Button variant="primary" onClick={onComplete} style={{ alignSelf: 'flex-end' }}>
          All done — continue
        </Button>
      )}
    </div>
  )
}
