import { useState } from 'react'
import { Icon } from '../ui/primitives'
import { useToast } from '../ui/Toast'

const FAQS = [
  { q: 'How do I create a new job requisition?', a: 'Navigate to Jobs and click "Create Job". Fill in the required fields marked with an asterisk and click Save. The job will immediately appear in your listings.' },
  { q: 'How does the AI candidate score work?', a: 'The AI score (0–100) evaluates how well a candidate matches the job requirements based on skills, experience, and education. Higher scores indicate stronger matches.' },
  { q: 'Can I move candidates between pipeline stages?', a: 'Yes. Open the Pipeline view and simply drag any candidate card between stage columns. The candidate’s status updates automatically.' },
  { q: 'How do I schedule an interview?', a: 'Go to Interviews or Calendar and click "Schedule Interview". Select the candidate, round, date, time, and interviewers.' },
  { q: 'How do I export reports?', a: 'On the Reports page, use the "Export Report" button for a full PDF, or the CSV buttons on individual tables.' },
]

const RESOURCES = [
  { icn: 'file', t: 'Documentation', d: 'Complete product guides', cls: 'i-indigo' },
  { icn: 'video', t: 'Video Tutorials', d: 'Watch step-by-step walkthroughs', cls: 'i-red' },
  { icn: 'message', t: 'Live Chat', d: 'Chat with our support team', cls: 'i-green' },
  { icn: 'users', t: 'Community', d: 'Connect with other recruiters', cls: 'i-purple' },
]

export default function Help() {
  const { toast } = useToast()
  const [open, setOpen] = useState(null)

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Help Center</h1>
          <p className="page-sub">Find answers and get support</p>
        </div>
      </div>

      <div className="card brand-hero mb-18">
        <div className="card-body" style={{ padding: 32, textAlign: 'center' }}>
          <h2 style={{ fontSize: 22, marginBottom: 8 }}>How can we help you?</h2>
          <p style={{ opacity: 0.85, marginBottom: 18 }}>
            Search our knowledge base or browse the topics below
          </p>
          <div className="topbar-search" style={{ maxWidth: 480, margin: '0 auto' }}>
            <Icon name="search" />
            <input placeholder="Search help articles…" />
          </div>
        </div>
      </div>

      <div className="grid g-kpi mb-18">
        {RESOURCES.map((r) => (
          <div key={r.t} className="card" style={{ cursor: 'pointer' }} onClick={() => toast(`Opening ${r.t}`, 'info')}>
            <div className="card-body" style={{ textAlign: 'center' }}>
              <span className={`kpi-icn ${r.cls}`} style={{ margin: '0 auto 12px', width: 48, height: 48, borderRadius: 14 }}>
                <Icon name={r.icn} />
              </span>
              <div className="fw-600">{r.t}</div>
              <div className="lr-sub" style={{ marginTop: 4 }}>{r.d}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-head"><div><h3>Frequently Asked Questions</h3></div></div>
        <div className="card-body">
          {FAQS.map((f, i) => (
            <div
              key={f.q}
              className="setting-row"
              style={{ cursor: 'pointer', flexDirection: 'column', alignItems: 'stretch' }}
              onClick={() => setOpen(open === i ? null : i)}
            >
              <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
                <h4>{f.q}</h4>
                <span
                  style={{
                    color: 'var(--text-3)',
                    transition: '.2s',
                    transform: open === i ? 'rotate(90deg)' : 'rotate(0deg)',
                  }}
                >
                  <Icon name="chevron-right" />
                </span>
              </div>
              {open === i && <p style={{ marginTop: 10 }}>{f.a}</p>}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}