'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { toast } from 'sonner'
import { BackLink } from '@/components/app/back-link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { CLAIM_LABELS, VERIFICATION_LABELS, companyRoleLabel } from '@/lib/domain/company'
import { formatDateTime, formatFullDate } from '@/lib/format'
import type { Company, CompanyAuditEvent, CompanyClaim, CompanyVerificationRecord } from '@/types/db'

export interface ReviewItem {
  kind: 'claim' | 'company'
  claim: CompanyClaim | null
  company: Company | null
  requester: { id: string; name: string; email: string; phone: string | null; role: string } | null
  records: CompanyVerificationRecord[]
}

/** Article §19 triggers, human-readable. */
const REASONS: Record<string, string> = {
  no_fmcsa_match: 'No FMCSA match',
  free_mail_user: 'Free-mail address (Gmail / Yahoo / Outlook)',
  no_corporate_email: 'No corporate email found',
  suspicious_approval: 'Suspicious approval (approver domain ≠ company)',
  reported_unknown_person: 'Company reported: unknown person',
  mc_number_change: 'MC number change requested',
  company_already_claimed: 'Company already claimed',
  slug_conflict: 'Slug conflict',
}

/** Article §8 Method 4 evidence. */
const EVIDENCE = [
  ['business_email', 'Business email'],
  ['business_card', 'Business card'],
  ['company_website', 'Company website'],
  ['fmcsa_match', 'FMCSA match'],
  ['phone_verification', 'Phone verification'],
  ['call_main_number', 'Call to company main number'],
  ['document_upload', 'Document upload'],
  ['authority_confirmation', 'Broker/carrier authority confirmation'],
] as const

async function reviewCall(body: Record<string, unknown>) {
  const res = await fetch('/api/admin/company-review', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  })
  const json = await res.json().catch(() => ({}))
  if (!res.ok) {
    toast.error(json.error ?? 'Action failed')
    return null
  }
  return json
}

export function CompanyReviewConsole({
  items,
  companies,
  users,
  conflicts,
}: {
  items: ReviewItem[]
  companies: Array<Pick<Company, 'id' | 'display_name' | 'mc_number' | 'company_type'>>
  users: Array<{ id: string; name: string; email: string }>
  conflicts: CompanyAuditEvent[]
}) {
  const router = useRouter()
  const [selected, setSelected] = useState<number | null>(null)
  const item = selected != null ? items[selected] : null

  return (
    <div className="mx-auto max-w-7xl space-y-5 px-4 py-8">
      <BackLink />
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">Company Review</h1>
          <p className="mt-1 text-sm text-neutral-500">
            Company verification that could not be settled automatically. Every action is written to
            the company audit log.
          </p>
        </div>
        <Link href="/admin/moderation" className="text-xs font-semibold text-neutral-500 hover:underline">
          Moderator Dashboard →
        </Link>
      </div>

      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)]">
        <div className="space-y-2">
          {items.length === 0 && (
            <p className="rounded-xl border border-dashed p-8 text-center text-sm text-neutral-500">
              Nothing to review.
            </p>
          )}
          {items.map((it, i) => (
            <button
              key={it.claim?.id ?? it.company?.id ?? i}
              type="button"
              onClick={() => setSelected(i)}
              className={`w-full rounded-xl border bg-white p-3.5 text-left text-sm transition hover:border-neutral-400 ${
                selected === i ? 'border-[#0f1b2d] ring-1 ring-[#0f1b2d]' : ''
              }`}
            >
              <p className="font-bold">
                {it.company?.display_name ?? '—'}
                {it.company?.mc_number ? <span className="font-normal text-neutral-500"> · MC {it.company.mc_number}</span> : null}
              </p>
              <p className="text-xs text-neutral-600">
                {it.kind === 'claim'
                  ? `${it.requester?.name ?? 'Unknown user'} · ${CLAIM_LABELS[it.claim!.claim_status]}`
                  : 'Company without an owner'}
              </p>
              <p className="mt-1 flex flex-wrap gap-1">
                {(it.claim?.review_reason ?? (it.company?.is_placeholder ? 'no_fmcsa_match' : ''))
                  .split(',')
                  .filter(Boolean)
                  .map((r) => (
                    <span key={r} className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[11px] text-amber-800">
                      {REASONS[r] ?? r}
                    </span>
                  ))}
                {it.company?.locked && (
                  <span className="rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-[11px] text-red-700">Locked</span>
                )}
              </p>
              <p className="mt-1 text-[11px] text-neutral-400">
                {formatFullDate(it.claim?.created_at ?? it.company?.created_at ?? '')}
                {it.records[0] ? ` · match: ${it.records[0].match_score}` : ''}
              </p>
            </button>
          ))}

          {conflicts.length > 0 && (
            <Card className="mt-4">
              <CardHeader>
                <CardTitle className="text-sm">Slug conflicts (logged)</CardTitle>
              </CardHeader>
              <CardContent className="space-y-1 text-xs text-neutral-600">
                {conflicts.map((c) => (
                  <p key={c.id}>
                    {formatDateTime(c.created_at)} · {c.actor_label} wanted{' '}
                    <span className="font-mono">/intake/{String(c.new_value?.requested ?? '')}</span>
                  </p>
                ))}
              </CardContent>
            </Card>
          )}
        </div>

        <div>
          {item ? (
            <Detail
              key={item.claim?.id ?? item.company?.id}
              item={item}
              companies={companies}
              users={users}
              onDone={() => router.refresh()}
            />
          ) : (
            <p className="rounded-xl border border-dashed p-10 text-center text-sm text-neutral-500">
              Select an item to review it.
            </p>
          )}
        </div>
      </div>
    </div>
  )
}

function Detail({
  item,
  companies,
  users,
  onDone,
}: {
  item: ReviewItem
  companies: Array<Pick<Company, 'id' | 'display_name' | 'mc_number' | 'company_type'>>
  users: Array<{ id: string; name: string; email: string }>
  onDone: () => void
}) {
  const { claim, company, requester } = item
  const [busy, setBusy] = useState(false)
  const [note, setNote] = useState('')
  const [info, setInfo] = useState('')
  const [checklist, setChecklist] = useState<Record<string, boolean>>({})
  const [evidenceNotes, setEvidenceNotes] = useState('')
  const [ownerId, setOwnerId] = useState(requester?.id ?? users[0]?.id ?? '')
  const [mergeInto, setMergeInto] = useState('')
  const [edit, setEdit] = useState(
    company
      ? {
          legal_name: company.legal_name,
          display_name: company.display_name,
          mc_number: company.mc_number ?? '',
          dot_number: company.dot_number ?? '',
          corporate_email: company.corporate_email ?? '',
          corporate_phone: company.corporate_phone ?? '',
          website: company.website ?? '',
          physical_address: company.physical_address ?? '',
        }
      : null,
  )

  async function act(body: Record<string, unknown>, done: string) {
    setBusy(true)
    try {
      const json = await reviewCall(body)
      if (json) {
        toast.success(done)
        onDone()
      }
      return json
    } finally {
      setBusy(false)
    }
  }

  const open = claim && !['approved', 'rejected', 'revoked'].includes(claim.claim_status)

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">
            {company?.display_name ?? '—'}
            {company ? (
              <span className="ml-2 text-xs font-normal text-neutral-500">
                {VERIFICATION_LABELS[company.verification_status]} · level {company.verification_level}
                {company.is_placeholder ? ' · placeholder' : ''}
              </span>
            ) : null}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          {requester && claim && (
            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 rounded-xl bg-neutral-50 p-3 text-xs">
              <dt className="text-neutral-500">Requester</dt>
              <dd className="font-semibold">
                {requester.name} · {requester.email}
                {requester.phone ? ` · ${requester.phone}` : ''} · {requester.role}
              </dd>
              <dt className="text-neutral-500">Requested</dt>
              <dd>
                {companyRoleLabel(claim.requested_role, company?.company_type)} · {formatDateTime(claim.created_at)}
                {claim.mc_number ? ` · MC typed: ${claim.mc_number}` : ''}
              </dd>
              <dt className="text-neutral-500">Status</dt>
              <dd className="font-semibold">{CLAIM_LABELS[claim.claim_status]}</dd>
              <dt className="text-neutral-500">Sent to</dt>
              <dd>{claim.approval_sent_to ?? '—'}</dd>
              {claim.approver_name && (
                <>
                  <dt className="text-neutral-500">Decided by</dt>
                  <dd>
                    {claim.approver_name}
                    {claim.approver_email ? ` <${claim.approver_email}>` : ''}
                    {claim.approver_ip ? ` · ${claim.approver_ip}` : ''}
                  </dd>
                </>
              )}
              {claim.info_request && (
                <>
                  <dt className="text-neutral-500">Info requested</dt>
                  <dd>{claim.info_request}</dd>
                </>
              )}
            </dl>
          )}

          {item.records.length > 0 && (
            <div>
              <p className="text-xs font-bold uppercase tracking-wide text-neutral-500">Public data / evidence</p>
              <ul className="mt-1 space-y-1 text-xs">
                {item.records.map((r) => (
                  <li key={r.id} className="rounded-lg border p-2">
                    <span className="font-semibold">{r.source}</span> · match {r.match_score} ·{' '}
                    {formatDateTime(r.created_at)}
                    {r.source_data ? <pre className="mt-1 whitespace-pre-wrap text-[11px] text-neutral-600">{JSON.stringify(r.source_data, null, 1)}</pre> : null}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {claim?.review_notes && (
            <div>
              <p className="text-xs font-bold uppercase tracking-wide text-neutral-500">Reviewer notes</p>
              <pre className="mt-1 whitespace-pre-wrap rounded-lg bg-neutral-50 p-2 text-[11px]">{claim.review_notes}</pre>
            </div>
          )}

          {claim && open && (
            <div className="flex flex-wrap gap-2 border-t pt-3">
              <Button size="sm" disabled={busy} onClick={() => act({ op: 'approve_company', claim_id: claim.id }, 'Approved')} className="bg-green-700 hover:bg-green-800">
                {claim.review_reason === 'mc_number_change' ? 'Approve MC change' : 'Approve company'}
              </Button>
              <Button size="sm" variant="outline" disabled={busy} onClick={() => act({ op: 'reject', claim_id: claim.id, note: note || undefined }, 'Rejected')}>
                Reject
              </Button>
              {company?.corporate_email && (
                <a
                  href={`mailto:${company.corporate_email}?subject=${encodeURIComponent('HeavyHaul Agent — company verification')}`}
                  className="rounded-lg border px-2.5 py-1 text-xs font-semibold hover:bg-neutral-50"
                >
                  Contact company manually
                </a>
              )}
            </div>
          )}

          {claim && open && (
            <form
              onSubmit={async (e) => {
                e.preventDefault()
                const json = await act({ op: 'request_info', claim_id: claim.id, note: info }, 'Request sent to the user')
                if (json) setInfo('')
              }}
              className="flex flex-wrap gap-2"
            >
              <Input value={info} onChange={(e) => setInfo(e.target.value)} placeholder="Request more information from the user…" required className="min-w-56 flex-1" />
              <Button size="sm" type="submit" variant="outline" disabled={busy}>
                Request more info
              </Button>
            </form>
          )}

          {claim && (
            <form
              onSubmit={async (e) => {
                e.preventDefault()
                const json = await act({ op: 'note', claim_id: claim.id, note }, 'Note added')
                if (json) setNote('')
              }}
              className="flex flex-wrap gap-2"
            >
              <Input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Internal reviewer note…" required className="min-w-56 flex-1" />
              <Button size="sm" type="submit" variant="ghost" disabled={busy}>
                Add note
              </Button>
            </form>
          )}
        </CardContent>
      </Card>

      {company && (
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">Evidence checklist (article §8)</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="grid gap-1.5 sm:grid-cols-2">
              {EVIDENCE.map(([key, label]) => (
                <label key={key} className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={!!checklist[key]}
                    onChange={(e) => setChecklist((c) => ({ ...c, [key]: e.target.checked }))}
                    className="h-4 w-4 accent-[#0f1b2d]"
                  />
                  {label}
                </label>
              ))}
            </div>
            <Textarea value={evidenceNotes} onChange={(e) => setEvidenceNotes(e.target.value)} placeholder="What was checked and how" rows={2} />
            <Button size="sm" variant="outline" disabled={busy} onClick={() => act({ op: 'checklist', company_id: company.id, items: checklist, notes: evidenceNotes }, 'Evidence recorded')}>
              Record evidence
            </Button>
          </CardContent>
        </Card>
      )}

      {company && edit && (
        <Card>
          <CardHeader>
            <CardTitle className="text-sm">Company profile</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="grid gap-3 sm:grid-cols-2">
              {(
                [
                  ['legal_name', 'Legal name'],
                  ['display_name', 'Display name'],
                  ['mc_number', 'MC number'],
                  ['dot_number', 'DOT number'],
                  ['corporate_email', 'Corporate email'],
                  ['corporate_phone', 'Corporate phone'],
                  ['website', 'Website'],
                  ['physical_address', 'Business address'],
                ] as const
              ).map(([k, label]) => (
                <div key={k} className="space-y-1">
                  <Label>{label}</Label>
                  <Input value={edit[k]} onChange={(e) => setEdit((f) => f && { ...f, [k]: e.target.value })} />
                </div>
              ))}
            </div>
            <div className="flex flex-wrap gap-2">
              <Button size="sm" disabled={busy} onClick={() => act({ op: 'company_patch', company_id: company.id, ...edit }, 'Company profile saved')} className="bg-[#0f1b2d] hover:bg-[#1c2f4a]">
                Save profile
              </Button>
              <Button size="sm" variant="outline" disabled={busy} onClick={() => act({ op: 'lock', company_id: company.id, locked: !company.locked }, company.locked ? 'Unlocked' : 'Locked')}>
                {company.locked ? 'Unlock company' : 'Lock company profile'}
              </Button>
            </div>

            <div className="grid gap-3 border-t pt-3 sm:grid-cols-2">
              <div className="space-y-1">
                <Label>Assign company owner</Label>
                <div className="flex gap-2">
                  <select value={ownerId} onChange={(e) => setOwnerId(e.target.value)} className="min-w-0 flex-1 rounded-lg border px-2 py-1.5 text-sm">
                    {users.map((u) => (
                      <option key={u.id} value={u.id}>
                        {u.name} · {u.email}
                      </option>
                    ))}
                  </select>
                  <Button size="sm" variant="outline" disabled={busy || !ownerId} onClick={() => act({ op: 'assign_owner', company_id: company.id, user_id: ownerId }, 'Owner assigned')}>
                    Assign
                  </Button>
                </div>
              </div>
              <div className="space-y-1">
                <Label>Merge this company into</Label>
                <div className="flex gap-2">
                  <select value={mergeInto} onChange={(e) => setMergeInto(e.target.value)} className="min-w-0 flex-1 rounded-lg border px-2 py-1.5 text-sm">
                    <option value="">Choose the surviving company…</option>
                    {companies
                      .filter((c) => c.id !== company.id)
                      .map((c) => (
                        <option key={c.id} value={c.id}>
                          {c.display_name}
                          {c.mc_number ? ` · MC ${c.mc_number}` : ''}
                        </option>
                      ))}
                  </select>
                  <Button
                    size="sm"
                    variant="outline"
                    disabled={busy || !mergeInto}
                    onClick={() => {
                      if (confirm(`Merge "${company.display_name}" into the selected company? Memberships, requests and the intake page move; nothing is deleted.`)) {
                        act({ op: 'merge', source_company_id: company.id, target_company_id: mergeInto }, 'Merged')
                      }
                    }}
                  >
                    Merge
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}