'use client'

import { useState } from 'react'
import { HelpCircle, ChevronDown, ChevronUp, ExternalLink } from 'lucide-react'
import { cn } from '@/lib/utils'

interface HelpStep {
  icon?: string
  text: string
  link?: { label: string; href: string }
}

interface SettingsHelpBoxProps {
  title: string
  steps: HelpStep[]
  defaultOpen?: boolean
  className?: string
}

export function SettingsHelpBox({ title, steps, defaultOpen = false, className }: SettingsHelpBoxProps) {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <div className={cn('rounded-xl border border-border/50 bg-border/5 overflow-hidden', className)}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-border/10 transition-colors"
      >
        <HelpCircle size={14} className="text-brand-accent shrink-0" />
        <span className="text-[12px] font-semibold text-ink flex-1">{title}</span>
        {open ? (
          <ChevronUp size={13} className="text-concrete shrink-0" />
        ) : (
          <ChevronDown size={13} className="text-concrete shrink-0" />
        )}
      </button>

      {open && (
        <ol className="px-4 pb-4 space-y-2.5 border-t border-border/30 pt-3">
          {steps.map((step, i) => (
            <li key={i} className="flex items-start gap-2.5">
              <span className="w-5 h-5 rounded-full bg-brand-accent/10 text-brand-accent text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">
                {step.icon ?? i + 1}
              </span>
              <span className="text-[12px] text-concrete leading-relaxed">
                {step.text}
                {step.link && (
                  <>
                    {' '}
                    <a
                      href={step.link.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-0.5 text-brand-accent underline underline-offset-2 font-medium hover:opacity-80"
                    >
                      {step.link.label}
                      <ExternalLink size={10} />
                    </a>
                  </>
                )}
              </span>
            </li>
          ))}
        </ol>
      )}
    </div>
  )
}