'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { PilotPreviewBanner } from '@/components/app/pilot-preview-banner'
import { usePreviewValue, writePreviewValue } from '@/lib/demo/pilot-store'
import { DEMO_PILOT_COMPANY, type DemoPilotAssignment } from '@/lib/demo/pilot'

/** Private trips the pilot dispatch created in this browser (Phase 1 replica). */
export const PILOT_PRIVATE_TRIPS_KEY = 'hha-pilot-preview-private-trips'

/**
 * Pilot Dispatch · New Trip — a PRIVATE trip (article §40: "Pilot companies
 * can create private trips. They do not have to invite a carrier, broker, or
 * driver" — to store permit copies, ask AI, order routes, prepare for a job,
 * track history). Phase 1 replica: saved to the per-browser preview store and
 * listed on the pilot dispatch dashboard; nothing reaches a server.
 */
export function PrivateTripForm() {
  const router = useRouter()
  const existing = usePreviewValue<DemoPilotAssignment[]>(PILOT_PRIVATE_TRIPS_KEY, [])
  const [f, setF] = useState({ origin: '', destination: '', carrier: '', commodity: '', pickup: '', delivery: '', notes: '' })
  const [permits, setPermits] = useState<string[]>([])
  const [dragOver, setDragOver] = useState(false)

  function submit(e: React.FormEvent) {
    e.preventDefault()
    if (!f.origin.trim() || !f.destination.trim()) { toast.error('Origin and destination are required'); return }
    const ref = `HH-P${String(Date.now()).slice(-6)}`
    const trip: DemoPilotAssignment = {
      id: `private-${ref}`,
      ref,
      carrier: f.carrier.trim() || 'Private trip — no carrier invited',
      carrierDispatcher: { name: '—', phone: '—', email: '—' },
      carrierDriver: { name: '—', phone: '—', email: '—' },
      origin: f.origin.trim(),
      destination: f.destination.trim(),
      commodity: f.commodity.trim() || 'Commodity TBD',
      overall: '—',
      weight: '—',
      truck: '—',
      trailer: '—',
      truckInfo: null,
      trailerInfo: null,
      // Our own trip: everything we upload is ours to see.
      scopes: [{ type: 'full_trip' }],
      permits: permits.map((name, i) => ({
        id: `${ref}-p${i}`,
        state: (name.match(/\b([A-Z]{2})\b/)?.[1] ?? '??'),
        permitNumber: name.replace(/\.[a-z0-9]+$/i, ''),
        effective: f.pickup || '—',
        expires: f.delivery || '—',
        escort: 'From the permit once read',
        curfew: 'From the permit once read',
        shared: true,
        route: null,
      })),
      pilotDriverId: null,
      vehicleId: null,
      position: 'Lead',
      status: 'accepted',
      invitedBy: 'carrier',
      createdAt: new Date().toISOString().slice(0, 10),
      carrierApprovalRequired: false,
      driverApprovedByCarrier: true,
    }
    writePreviewValue(PILOT_PRIVATE_TRIPS_KEY, [trip, ...existing])
    toast.success(`Private trip ${ref} created (preview — nothing is stored on a server)`)
    router.push('/pd-dashboard')
  }

  return (
    <form onSubmit={submit} className="mt-6 space-y-4">
      <PilotPreviewBanner screen="Pilot Dispatch · New Trip" />
      <Card>
        <CardContent className="grid gap-4 pt-6 sm:grid-cols-2">
          <Field id="origin" label="Origin" required value={f.origin} onChange={(v) => setF({ ...f, origin: v })} placeholder="City, ST or full address" />
          <Field id="destination" label="Destination" required value={f.destination} onChange={(v) => setF({ ...f, destination: v })} placeholder="City, ST or full address" />
          <Field id="carrier" label="Carrier (optional)" value={f.carrier} onChange={(v) => setF({ ...f, carrier: v })} placeholder="Who you are escorting" />
          <Field id="commodity" label="Commodity" value={f.commodity} onChange={(v) => setF({ ...f, commodity: v })} placeholder="e.g. Transformer, 2 pc" />
          <Field id="pickup" label="Pickup date" type="date" value={f.pickup} onChange={(v) => setF({ ...f, pickup: v })} />
          <Field id="delivery" label="Delivery date" type="date" value={f.delivery} onChange={(v) => setF({ ...f, delivery: v })} />
          <div className="space-y-2 sm:col-span-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea id="notes" rows={3} value={f.notes} onChange={(e) => setF({ ...f, notes: e.target.value })} placeholder="Meeting point, escort set, anything your driver should know" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="pt-6">
          <Label>Permit copies (optional)</Label>
          <p className="mt-1 text-xs text-neutral-500">Drop the permits the carrier sent you — one per state — so you can ask the agent about them and order routes.</p>
          <label
            onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
            onDragLeave={() => setDragOver(false)}
            onDrop={(e) => { e.preventDefault(); setDragOver(false); setPermits((p) => [...p, ...Array.from(e.dataTransfer.files).map((x) => x.name)]) }}
            className={`mt-3 flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-6 text-center transition ${dragOver ? 'border-[#f5a623] bg-amber-50' : 'border-neutral-300 hover:border-neutral-400'}`}
          >
            <span className="text-sm font-semibold">Drag &amp; drop permits here</span>
            <span className="mt-1 text-xs text-neutral-500">or click to choose · PDF, JPG, PNG · files are not stored in this preview</span>
            <input type="file" multiple className="hidden" accept=".pdf,.jpg,.jpeg,.png" onChange={(e) => setPermits((p) => [...p, ...Array.from(e.target.files ?? []).map((x) => x.name)])} />
          </label>
          {permits.length > 0 && (
            <ul className="mt-3 space-y-1 text-xs">
              {permits.map((p, i) => (
                <li key={i} className="flex items-center justify-between rounded-lg bg-neutral-50 px-3 py-1.5">
                  <span>📄 {p}</span>
                  <button type="button" onClick={() => setPermits((l) => l.filter((_, j) => j !== i))} className="text-neutral-500 hover:text-red-600">Remove</button>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      <p className="text-xs text-neutral-500">
        A private trip belongs to {DEMO_PILOT_COMPANY.name}. No carrier, broker or driver is invited unless you share it later from the trip workspace.
      </p>
      <Button type="submit" className="w-full">Create private trip</Button>
    </form>
  )
}

function Field({ id, label, value, onChange, type = 'text', required, placeholder }: { id: string; label: string; value: string; onChange: (v: string) => void; type?: string; required?: boolean; placeholder?: string }) {
  return (
    <div className="space-y-2">
      <Label htmlFor={id}>{label}{required && <span className="ml-1 text-red-600">*</span>}</Label>
      <Input id={id} type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} required={required} />
    </div>
  )
}