import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ActivityForm from '../components/ActivityForm.jsx'
import { ENTRY } from '../api/config.js'
import './screens.css'

/**
 * The three doors. Each is a separate INIT activity with its own permissions,
 * and the bank one lands the instance further along because the bank already
 * did CKYC. Whichever door is used, everything after it is identical.
 */
export default function AddLead() {
  // One door surfaced: skip the chooser entirely rather than show a list of one.
  const [entry, setEntry] = useState(ENTRY.length === 1 ? ENTRY[0] : null)
  const navigate = useNavigate()

  return (
    <section>
      <header className="page__head">
        <div>
          <h1 className="page__title">Add a lead</h1>
          <p className="page__sub">Three doors, one machine. The door decides who may submit and where it lands — nothing after that.</p>
        </div>
      </header>

      {!entry ? (
        <div className="doors">
          {ENTRY.map((e) => (
            <button key={e.uid} type="button" className="door" onClick={() => setEntry(e)}>
              <strong>{e.label}</strong>
              <span className="chip">{e.channel}</span>
              <p>{e.note}</p>
            </button>
          ))}
        </div>
      ) : (
        <div className="panel">
          <div className="panel__head">
            <div>
              <h2 className="panel__title">{entry.label}</h2>
              <p className="panel__sub">{entry.note}</p>
            </div>
            {ENTRY.length > 1 ? (
              <button type="button" className="af__ghost" onClick={() => setEntry(null)}>Change door</button>
            ) : null}
          </div>
          <ActivityForm
            activityUid={entry.uid}
            onDone={(res) => {
              const id = res?.instance_id || res?.data?.instance_id
              if (id) navigate(`/lead/${id}`)
            }}
          />
        </div>
      )}
    </section>
  )
}