import { ArrowLeft, Check, Code2, Copy, KeyRound } from 'lucide-react'
import { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { urmiOtpApi, type UrmiOtpDocumentation } from '../../lib/api'

export function UrmiOtpDocsPage() {
  const { projectId = '' } = useParams()
  const navigate = useNavigate()
  const [docs, setDocs] = useState<UrmiOtpDocumentation | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [copied, setCopied] = useState(false)

  useEffect(() => {
    urmiOtpApi.documentation(projectId)
      .then(setDocs)
      .catch((reason) => setError(reason instanceof Error ? reason.message : 'Unable to load documentation'))
      .finally(() => setLoading(false))
  }, [projectId])

  if (loading) return <div className="auth-loading">Loading sending instructions…</div>
  if (!docs) return <section className="panel"><p className="auth-error">{error}</p></section>

  const requestExample = JSON.stringify(docs.api.example, null, 2)

  async function copyExample() {
    await navigator.clipboard.writeText(requestExample)
    setCopied(true)
    window.setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="urmiotp-docs-page">
      <button className="text-button otp-back" onClick={() => navigate('/console/agent/urmiotp')}>
        <ArrowLeft size={14} /> Back to projects
      </button>
      <div className="account-heading">
        <span className="eyebrow">Verification codes · {docs.project.project_name}</span>
        <h1>How to send a code</h1>
        <p className="otp-message-label">
          Message label: <strong>{docs.project.message_label}</strong>
          <span> — your product identification in each message. URMI branding remains unchanged.</span>
        </p>
        <p>Unified verification templates for login, recovery, account changes, transactions, and devices.</p>
      </div>

      <section className="panel otp-api-overview">
        <div className="panel-heading">
          <div><h2>Send a verification code</h2><p>{docs.api.summary}</p></div>
          <span className="explorer-method">{docs.api.method}</span>
        </div>
        <div className="explorer-field-row"><span>Address</span><code>{docs.api.path}</code></div>
        <div className="otp-api-notice">
          <Code2 size={16} />
          <span>
            Customers receive the approved verification text. The type you choose only groups the request. The message they see matches the preview.
          </span>
        </div>
        <div className="otp-parameter-list">
          {Object.entries(docs.api.parameters).map(([name, description]) => (
            <div key={name}><code>{name}</code><span>{description}</span></div>
          ))}
        </div>
        <div className="otp-code-heading">
          <strong>Request body</strong>
          <button className="secondary-button" onClick={copyExample}><Copy size={13} /> {copied ? 'Copied' : 'Copy'}</button>
        </div>
        <pre className="explorer-code">{requestExample}</pre>
      </section>

      <div className="otp-template-grid">
        {docs.templates.map((template, index) => (
          <section className="panel otp-template-card" key={template.type}>
            <div className="otp-template-number">{String(index + 1).padStart(2, '0')}</div>
            <div className="panel-heading">
              <div><h2>{template.name}</h2><p><code>{template.type}</code></p></div>
              <KeyRound size={17} />
            </div>
            <div className="otp-template-copy">
              <span>Approved content</span>
              <p>{template.content}</p>
            </div>
            <div className="otp-template-copy sample">
              <span>Sample</span>
              <p>{template.sample}</p>
            </div>
            <div className="otp-template-columns">
              <div>
                <strong>Use for</strong>
                <ul>{template.uses.map((use) => <li key={use}><Check size={12} /> {use}</li>)}</ul>
              </div>
              <div>
                <strong>Variables</strong>
                <ol>{template.variables.map((variable) => <li key={variable}>{variable}</li>)}</ol>
              </div>
            </div>
          </section>
        ))}
      </div>
    </div>
  )
}