'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { toast } from 'sonner'
import { leadTemplateVariables } from '@/lib/domain/broker-leads'
import type { LeadTemplate, LeadsSettings } from '@/lib/data/broker-leads'
import { BTN, CARD, INPUT, Pill, call } from './shared'
import { useLeadKind } from './kind-context'

const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

/** Defaults for new campaigns, the cron, and the templates a lead campaign can use. */
export function SettingsTab({ settings, templates }: { settings: LeadsSettings; templates: LeadTemplate[] }) {
  const cfg = useLeadKind()
  const router = useRouter()
  const [s, setS] = useState(settings)
  const [busy, setBusy] = useState(false)
  async function save() {
    setBusy(true)
    try { await call(`${cfg.apiBase}/settings`, { default_daily_limit: s.default_daily_limit, default_batch_size: s.default_batch_size, default_send_window: s.default_send_window, default_ramp: s.default_ramp, default_frequency_cap_days: s.default_frequency_cap_days }); toast.success('Defaults saved.'); router.refresh() } catch (e) { toast.error(e instanceof Error ? e.message : 'Could not save.') } finally { setBusy(false) }
  }
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className={CARD}>
        <p className="text-xs font-bold uppercase tracking-wide text-neutral-400">Defaults for new campaigns</p>
        <div className="mt-3 grid gap-3 text-xs sm:grid-cols-2">
          <label className="font-semibold text-neutral-600">Daily limit<input type="number" min={1} className={`${INPUT} mt-1 block w-full`} value={s.default_daily_limit} onChange={(e) => setS({ ...s, default_daily_limit: Number(e.target.value) })} /></label>
          <label className="font-semibold text-neutral-600">Batch per hourly run<input type="number" min={1} className={`${INPUT} mt-1 block w-full`} value={s.default_batch_size} onChange={(e) => setS({ ...s, default_batch_size: Number(e.target.value) })} /></label>
          <label className="font-semibold text-neutral-600">Frequency cap (days)<input type="number" min={0} className={`${INPUT} mt-1 block w-full`} value={s.default_frequency_cap_days} onChange={(e) => setS({ ...s, default_frequency_cap_days: Number(e.target.value) })} /></label>
          <div className="font-semibold text-neutral-600">Warm-up ramp
            <div className="mt-1 flex flex-wrap items-center gap-1 font-normal"><label className="flex items-center gap-1"><input type="checkbox" checked={!!s.default_ramp} onChange={(e) => setS({ ...s, default_ramp: e.target.checked ? { start: 50, step: 50, max: 300 } : null })} /> on</label>
              {s.default_ramp && <>start <input type="number" className={`${INPUT} w-16`} value={s.default_ramp.start} onChange={(e) => setS({ ...s, default_ramp: { ...s.default_ramp!, start: Number(e.target.value) } })} /> +<input type="number" className={`${INPUT} w-14`} value={s.default_ramp.step} onChange={(e) => setS({ ...s, default_ramp: { ...s.default_ramp!, step: Number(e.target.value) } })} />/day to <input type="number" className={`${INPUT} w-16`} value={s.default_ramp.max} onChange={(e) => setS({ ...s, default_ramp: { ...s.default_ramp!, max: Number(e.target.value) } })} /></>}
            </div>
          </div>
        </div>
        <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
          <span className="font-semibold text-neutral-600">Send window</span>
          {DAYS.map((d, i) => <button key={d} onClick={() => { const days = s.default_send_window.days; const next = days.includes(i) ? days.filter((x) => x !== i) : [...days, i]; setS({ ...s, default_send_window: { ...s.default_send_window, days: next.length ? next : days } }) }} className={`rounded-full border px-2 py-0.5 font-semibold ${s.default_send_window.days.includes(i) ? 'border-[#0f1b2d] bg-[#0f1b2d] text-white' : 'bg-white text-neutral-600'}`}>{d}</button>)}
          <input type="number" min={0} max={23} className={`${INPUT} w-16`} value={s.default_send_window.start_hour} onChange={(e) => setS({ ...s, default_send_window: { ...s.default_send_window, start_hour: Number(e.target.value) } })} />:00 to <input type="number" min={1} max={24} className={`${INPUT} w-16`} value={s.default_send_window.end_hour} onChange={(e) => setS({ ...s, default_send_window: { ...s.default_send_window, end_hour: Number(e.target.value) } })} />:00
          <select className={INPUT} value={s.default_send_window.timezone} onChange={(e) => setS({ ...s, default_send_window: { ...s.default_send_window, timezone: e.target.value } })}><option value="lead">lead&apos;s time zone (by state)</option><option value="America/New_York">America/New_York</option><option value="America/Chicago">America/Chicago</option><option value="America/Denver">America/Denver</option><option value="America/Los_Angeles">America/Los_Angeles</option></select>
        </div>
        <div className="mt-3 flex justify-end"><button onClick={save} disabled={busy} className={BTN}>{busy ? 'Saving…' : 'Save defaults'}</button></div>
        <p className="mt-3 text-[11px] text-neutral-500">Scheduler: call <code className="rounded bg-neutral-100 px-1">POST {cfg.apiBase}/run</code> hourly from the host cron with the <code className="rounded bg-neutral-100 px-1">x-campaign-cron-secret</code> header (CAMPAIGN_CRON_SECRET in .env). The switch at the top of the page gates it; &quot;Run now&quot; ignores the switch.{settings.updated_by ? ` Last changed by ${settings.updated_by}.` : ''}</p>
      </div>
      <div className={CARD}>
        <p className="text-xs font-bold uppercase tracking-wide text-neutral-400">Templates for lead campaigns</p>
        <p className="mt-1 text-xs text-neutral-500">Updates stream, category &quot;{cfg.kind === 'carrier' ? 'Carrier invitations' : 'Freight broker invitations'}&quot;. Create and edit them on the <Link href={`${cfg.path}?tab=templates`} className="font-semibold underline">Templates</Link> tab — wording, subject, versions, activation, preview and test sends all live there.</p>
        <ul className="mt-3 space-y-2 text-xs">
          {templates.map((t) => (
            <li key={t.key} className="rounded-lg border p-2">
              <div className="flex flex-wrap items-center gap-2"><span className="font-semibold">{t.name}</span><Pill tone={t.active ? 'success' : 'danger'}>{t.active ? 'active' : 'inactive'}</Pill><span className="text-neutral-400">v{t.version}{t.is_custom ? ' · custom' : ''}</span><code className="ml-auto text-[10px] text-neutral-400">{t.key}</code></div>
              <p className="mt-1 text-neutral-600">{t.subject}</p>
            </li>
          ))}
          {templates.length === 0 && <li className="text-neutral-500">No templates in this category yet.</li>}
        </ul>
        <p className="mt-3 text-[11px] text-neutral-500">Variables: {leadTemplateVariables(cfg.kind).map((v) => <code key={v} className="mr-1 rounded bg-neutral-100 px-1">{`{{${v}}}`}</code>)}. Every campaign email carries the unsubscribe and preferences links automatically.</p>
      </div>
    </div>
  )
}