import { Loader2 } from 'lucide-react'
import { useEffect, useState, type FormEvent } from 'react'
import { Link, useSearchParams } from 'react-router-dom'
import { whatsappApi, type WhatsAppAccount, type WhatsAppTemplateRow } from '../../lib/api'

const TEAM_TEMPLATE_NAME = 'urmi_team_aircheck'
const TEAM_TEMPLATE_BODY = "Team, the broadcast desk is on air. This is the first note Urmi is sending through Meta's marketing line, and it is written for the people building it. Read it on your phone, then bring it to standup so we can close the test."

type BroadcastResult = {
  template_name: string
  sent: number
  failed: number
  results: { to: string; status: string; error?: string; message_id?: string | null }[]
}

type CreatedTemplate = {
  name: string
  status: string
}

export function WhatsAppBroadcastPage() {
  const [params] = useSearchParams()
  const [accounts, setAccounts] = useState<WhatsAppAccount[]>([])
  const [accountId, setAccountId] = useState('')
  const [templates, setTemplates] = useState<WhatsAppTemplateRow[]>([])
  const [templatesReady, setTemplatesReady] = useState(false)
  const [templateName, setTemplateName] = useState(TEAM_TEMPLATE_NAME)
  const [templateLanguage, setTemplateLanguage] = useState('en')
  const [draftName, setDraftName] = useState(TEAM_TEMPLATE_NAME)
  const [draftBody, setDraftBody] = useState(TEAM_TEMPLATE_BODY)
  const [creating, setCreating] = useState(false)
  const [created, setCreated] = useState<CreatedTemplate | null>(null)
  const [templateTick, setTemplateTick] = useState(0)
  const [recipients, setRecipients] = useState('')
  const [bodyValues, setBodyValues] = useState('')
  const [strict, setStrict] = useState(true)
  const [loading, setLoading] = useState(true)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')
  const [result, setResult] = useState<BroadcastResult | null>(null)

  useEffect(() => {
    whatsappApi.accounts()
      .then((rows) => {
        const ready = rows.filter((row) => row.messaging_status === 'active' && row.phones.some((phone) => phone.status === 'connected'))
        setAccounts(ready)
        if (ready[0]) setAccountId(ready[0].id)
      })
      .catch((reason) => setError(reason instanceof Error ? reason.message : 'Could not load WhatsApp accounts'))
      .finally(() => setLoading(false))
  }, [])

  useEffect(() => {
    if (!accountId) return
    setTemplatesReady(false)
    whatsappApi.templates(accountId)
      .then((payload) => {
        const marketing = payload.templates.filter((item) => (item.category || '').toUpperCase() === 'MARKETING')
        setTemplates(marketing)
        setTemplatesReady(payload.available)
        const requested = params.get('template')
        const requestedLanguage = params.get('language')
        const approved = marketing.find((item) => item.name === requested) || marketing.find((item) => (item.status || '').toUpperCase() === 'APPROVED' && item.name)
        if (requested) setTemplateName(requested)
        if (requestedLanguage) setTemplateLanguage(requestedLanguage)
        if (approved?.name && !requested) {
          setTemplateName(approved.name)
          setTemplateLanguage(approved.language || 'en')
        }
      })
      .catch(() => {
        setTemplates([])
        setTemplatesReady(false)
      })
  }, [accountId, templateTick])

  async function createTemplate(event: FormEvent) {
    event.preventDefault()
    setCreating(true)
    setError('')
    setCreated(null)
    try {
      const payload = await whatsappApi.createMarketingTemplate(accountId, {
        name: draftName.trim(),
        language: 'en',
        body: draftBody.trim(),
      })
      setCreated(payload)
      setTemplateName(payload.name)
      setTemplateLanguage(payload.language || 'en')
      setTemplateTick((value) => value + 1)
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : 'Meta did not accept this template')
    } finally {
      setCreating(false)
    }
  }

  async function submit(event: FormEvent) {
    event.preventDefault()
    setBusy(true)
    setError('')
    setResult(null)
    const numbers = recipients.split(/[\n,]/).map((item) => item.trim()).filter(Boolean)
    const parameters = bodyValues.split('\n').map((item) => item.trim()).filter(Boolean)
    try {
      const payload = await whatsappApi.sendBroadcast(accountId, {
        template_name: templateName.trim(),
        template_language: templateLanguage.trim() || 'en',
        recipients: numbers,
        body_parameters: parameters,
        product_policy: strict ? 'STRICT' : 'CLOUD_API_FALLBACK',
      })
      setResult(payload)
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : 'Meta did not accept this broadcast')
    } finally {
      setBusy(false)
    }
  }

  const approved = templates.filter((item) => (item.status || '').toUpperCase() === 'APPROVED' && item.name)
  const pending = templates.filter((item) => (item.status || '').toUpperCase() !== 'APPROVED' && item.name)

  return (
    <div className="wa-biz wa-token-page">
      <div className="account-heading">
        <span className="eyebrow">Messages</span>
        <h1>WhatsApp broadcast</h1>
        <p>Sends a marketing template through Meta’s marketing endpoint. Chat replies stay on the WhatsApp page.</p>
      </div>

      {!loading && accounts.length > 0 && (
        <form className="wa-biz-card" onSubmit={createTemplate}>
          <h2>Create the template here</h2>
          <p>Urmi submits this to Meta as a Marketing template on the connected account. Meta still has to approve it before a broadcast can send. That usually takes a few minutes.</p>
          <div className="wa-token-form">
            <label className="explorer-input">
              <strong>Template name</strong>
              <span>Lowercase letters, numbers, and underscores. Meta uses this name when you send.</span>
              <input value={draftName} onChange={(event) => setDraftName(event.target.value)} required />
            </label>
            <label className="explorer-input">
              <strong>Message</strong>
              <span>English, no header, buttons, or placeholders. Written for the internal team.</span>
              <textarea value={draftBody} onChange={(event) => setDraftBody(event.target.value)} rows={5} required />
            </label>
            <button className="primary-button" type="submit" disabled={creating || !accountId}>
              {creating ? <Loader2 size={16} className="wa-spin" /> : null}
              Submit template to Meta
            </button>
          </div>
          {created && (
            <p className="wa-token-result">{created.name} is {created.status.toLowerCase()}. Send it after Meta marks it approved.</p>
          )}
        </form>
      )}

      {error && <p className="auth-error">{error}</p>}
      {loading && <div className="auth-loading">Loading accounts…</div>}

      {!loading && accounts.length === 0 && (
        <section className="panel placeholder">
          <p>Connect a WhatsApp number before sending a broadcast.</p>
          <Link className="primary-button" to="/console/whatsapp/token">Add a WhatsApp token</Link>
        </section>
      )}

      {!loading && accounts.length > 0 && (
        <form className="wa-biz-card" onSubmit={submit}>
          <div className="wa-token-form">
            <label className="explorer-input">
              <strong>Account</strong>
              <span>The connected number this broadcast is sent from.</span>
              <select value={accountId} onChange={(event) => setAccountId(event.target.value)}>
                {accounts.map((account) => (
                  <option key={account.id} value={account.id}>
                    {account.name} · {account.primary_phone?.display_phone || account.phones[0]?.display_phone || 'WhatsApp'}
                  </option>
                ))}
              </select>
            </label>
            <label className="explorer-input">
              <strong>Marketing template</strong>
              <span>
                {templatesReady
                  ? approved.length
                    ? 'Approved marketing templates on this account.'
                    : pending.length
                      ? `${pending.map((item) => item.name).join(', ')} is waiting for Meta’s approval.`
                      : 'No approved marketing template yet. Submit the team message above, then come back when Meta approves it.'
                  : 'Template list is unavailable. You can still type the approved template name.'}
              </span>
              {approved.length > 0 ? (
                <select
                  value={templateName}
                  onChange={(event) => {
                    const next = approved.find((item) => item.name === event.target.value)
                    setTemplateName(event.target.value)
                    if (next?.language) setTemplateLanguage(next.language)
                  }}
                >
                  {approved.map((item) => (
                    <option key={`${item.name}-${item.language}`} value={item.name || ''}>
                      {item.name} ({item.language || 'en'})
                    </option>
                  ))}
                </select>
              ) : (
                <input value={templateName} onChange={(event) => setTemplateName(event.target.value)} required />
              )}
            </label>
            <label className="explorer-input">
              <strong>Language</strong>
              <span>Use the language code Meta shows on the template, such as en.</span>
              <input value={templateLanguage} onChange={(event) => setTemplateLanguage(event.target.value)} required />
            </label>
            <label className="explorer-input">
              <strong>Recipients</strong>
              <span>One WhatsApp number per line, up to 20. Include the country code.</span>
              <textarea value={recipients} onChange={(event) => setRecipients(event.target.value)} rows={4} required placeholder="9198XXXXXXXX" />
            </label>
            <label className="explorer-input">
              <strong>Body values</strong>
              <span>Leave this empty for the team aircheck. If a template has {'{{1}}'}, {'{{2}}'}, put one value per line in that order.</span>
              <textarea value={bodyValues} onChange={(event) => setBodyValues(event.target.value)} rows={3} />
            </label>
            <label className="explorer-input">
              <strong>Marketing endpoint only</strong>
              <span>Leave this on to test Meta’s marketing API. Turn it off only if Meta says this account is not onboarded yet and you still want the message delivered.</span>
              <input type="checkbox" checked={strict} onChange={(event) => setStrict(event.target.checked)} />
            </label>
            <button className="primary-button" type="submit" disabled={busy || !accountId}>
              {busy ? <Loader2 size={16} className="wa-spin" /> : null}
              Send broadcast
            </button>
          </div>
        </form>
      )}

      {result && (
        <section className="wa-biz-card wa-token-result">
          <h2>{result.sent} sent, {result.failed} failed</h2>
          <ul className="wa-broadcast-results">
            {result.results.map((item) => (
              <li key={`${item.to}-${item.message_id || item.error || item.status}`}>
                <span>{item.to}</span>
                <span>{item.status === 'sent' ? 'Sent' : item.error || 'Failed'}</span>
              </li>
            ))}
          </ul>
        </section>
      )}
    </div>
  )
}