'use client'

import { useMemo, useState, type FormEvent } from 'react'
import { createManualLead } from '@/lib/leads/api'
import type { AppUser, ManualLeadPayload, ManualLeadResponse, TeamUserRecord } from '@/lib/types'

interface ManualLeadFormProps {
  currentUser: AppUser
  teamUsers: TeamUserRecord[]
  onCreated: (result: ManualLeadResponse) => void
  onCancel: () => void
}

const INITIAL_FORM: ManualLeadPayload = {
  business_name: '',
  normalized_category: '',
  phone: '',
  mobile: '',
  whatsapp: '',
  landline: '',
  email: '',
  website: '',
  address: '',
  city: '',
  country: '',
  notes: '',
  score: null,
  assigned_to: null,
}

export default function ManualLeadForm({ currentUser, teamUsers, onCreated, onCancel }: ManualLeadFormProps) {
  const [form, setForm] = useState<ManualLeadPayload>(INITIAL_FORM)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState('')
  const [message, setMessage] = useState('')

  const assignableUsers = useMemo(() => (
    teamUsers
      .filter(user => user.is_active && (currentUser.role !== 'manager' || user.team_slug === currentUser.team_slug))
      .sort((left, right) => left.display_name.localeCompare(right.display_name))
  ), [currentUser.role, currentUser.team_slug, teamUsers])

  const updateField = <K extends keyof ManualLeadPayload>(key: K, value: ManualLeadPayload[K]) => {
    setForm(prev => ({
      ...prev,
      [key]: value,
    }))
  }

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    setIsSubmitting(true)
    setError('')
    setMessage('')

    try {
      const result = await createManualLead({
        ...form,
        assigned_to: form.assigned_to || null,
        score: form.score ?? null,
      })

      if (result.created) {
        setForm(INITIAL_FORM)
        setMessage('Manual lead created successfully.')
      } else {
        setMessage('This lead already existed, so no duplicate record was created.')
      }

      onCreated(result)
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Unable to create manual lead')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="mx-6 mt-4 rounded-2xl border border-[#574143]/10 bg-[#060e20] p-5">
      <div className="flex items-start justify-between gap-4">
        <div>
          <p className="text-[10px] font-black uppercase tracking-widest text-slate-500">Manual Lead Creation</p>
          <h3 className="mt-1 text-lg font-extrabold text-slate-100">Add a lead directly to the shared library</h3>
          <p className="mt-1 text-xs leading-relaxed text-slate-400">
            Manual leads are stored as real records with ownership, scoring, notes, and CRM history.
          </p>
        </div>
        <button
          type="button"
          onClick={onCancel}
          className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2 text-xs font-bold text-slate-300 transition-colors hover:text-white"
        >
          Close
        </button>
      </div>

      <div className="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
        {[
          ['business_name', 'Business Name', 'required'],
          ['normalized_category', 'Category', 'required'],
          ['phone', 'Phone', 'optional'],
          ['mobile', 'Mobile', 'optional'],
          ['whatsapp', 'WhatsApp', 'optional'],
          ['landline', 'Landline', 'optional'],
          ['email', 'Email', 'optional'],
          ['website', 'Website', 'optional'],
          ['address', 'Address', 'optional'],
          ['city', 'City', 'optional'],
          ['country', 'Country', 'optional'],
        ].map(([key, label, hint]) => (
          <label key={key} className="flex flex-col gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-tight text-slate-400">
              {label} <span className="text-slate-600">{hint}</span>
            </span>
            <input
              value={String(form[key as keyof ManualLeadPayload] ?? '')}
              onChange={event => updateField(key as keyof ManualLeadPayload, event.target.value)}
              className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2.5 text-sm text-[#dae2fd] outline-none transition focus:border-[#ffb2b9]/30 focus:ring-1 focus:ring-[#ffb2b9]/40"
            />
          </label>
        ))}

        <label className="flex flex-col gap-1.5">
          <span className="text-[11px] font-bold uppercase tracking-tight text-slate-400">Assigned To</span>
          <select
            value={form.assigned_to ?? ''}
            onChange={event => updateField('assigned_to', event.target.value || null)}
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2.5 text-sm text-[#dae2fd] outline-none transition focus:border-[#ffb2b9]/30 focus:ring-1 focus:ring-[#ffb2b9]/40"
          >
            <option value="">Current owner ({currentUser.display_name})</option>
            {assignableUsers.map(user => (
              <option key={user.id} value={user.id}>
                {user.display_name} ({user.role})
              </option>
            ))}
          </select>
        </label>

        <label className="flex flex-col gap-1.5">
          <span className="text-[11px] font-bold uppercase tracking-tight text-slate-400">Score Override</span>
          <input
            type="number"
            min={0}
            max={100}
            value={form.score ?? ''}
            onChange={event => updateField('score', event.target.value ? Number(event.target.value) : null)}
            placeholder="Auto-score if left blank"
            className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2.5 text-sm text-[#dae2fd] outline-none transition focus:border-[#ffb2b9]/30 focus:ring-1 focus:ring-[#ffb2b9]/40"
          />
        </label>
      </div>

      <label className="mt-4 flex flex-col gap-1.5">
        <span className="text-[11px] font-bold uppercase tracking-tight text-slate-400">Notes</span>
        <textarea
          rows={4}
          value={form.notes ?? ''}
          onChange={event => updateField('notes', event.target.value)}
          placeholder="Capture anything the team should know before outreach."
          className="rounded-xl border border-[#574143]/10 bg-[#131b2e] px-3 py-2.5 text-sm text-[#dae2fd] outline-none transition focus:border-[#ffb2b9]/30 focus:ring-1 focus:ring-[#ffb2b9]/40"
        />
      </label>

      {error && (
        <div className="mt-4 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">
          {error}
        </div>
      )}

      {message && (
        <div className="mt-4 rounded-xl border border-[#22c55e]/20 bg-[#22c55e]/10 px-4 py-3 text-sm text-[#9fe8c4]">
          {message}
        </div>
      )}

      <div className="mt-5 flex flex-wrap items-center gap-3">
        <button
          type="submit"
          disabled={isSubmitting}
          className="rounded-xl bg-[#dae2fd] px-4 py-3 text-sm font-black text-[#0b1326] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
        >
          {isSubmitting ? 'Creating Lead...' : 'Create Manual Lead'}
        </button>
        <p className="text-xs text-slate-500">
          Owner defaults to {currentUser.display_name}. New manual leads start in the saved stage.
        </p>
      </div>
    </form>
  )
}