'use client'

import { useActionState, useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import { Trash2, MapPin } from 'lucide-react'
import { updateItem, deleteItem } from '../../actions'
import { LocationMapPicker, type PickerMap } from '@/components/location-map-picker'

const inputCls =
  'flex h-11 w-full rounded-lg border border-input bg-background px-3 py-2 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'

interface ItemDraft {
  id: string
  name: string
  description: string | null
  category: string | null
  brand: string | null
  serialNumber: string | null
  notes: string | null
  caption: string | null
  qty: number
  value: string
  status: string
  locationId: string
  tags: string[]
}

interface Props {
  item: ItemDraft
  locations: { id: string; path: string }[]
  maps: PickerMap[]
}

export function EditItemForm({ item, locations, maps }: Props) {
  const [state, formAction, pending] = useActionState(updateItem, null)
  const [deletePending, startDelete] = useTransition()
  const [locationId, setLocationId] = useState(item.locationId)
  const router = useRouter()

  return (
    <form action={formAction} className="space-y-4">
      <input type="hidden" name="id" value={item.id} />

      {state?.error && (
        <div className="bg-destructive/10 text-destructive text-sm rounded-lg px-4 py-3 border border-destructive/20">
          {state.error}
        </div>
      )}

      <Field label="Name" required>
        <input name="name" type="text" defaultValue={item.name} className={inputCls} required />
      </Field>

      <Field label="Location" required>
        <div className="flex gap-2">
          <select
            name="locationId"
            required
            value={locationId}
            onChange={e => setLocationId(e.target.value)}
            className={inputCls + ' flex-1'}
          >
            {locations.map(l => (
              <option key={l.id} value={l.id}>{l.path}</option>
            ))}
          </select>
          <LocationMapPicker
            maps={maps}
            onPick={id => setLocationId(id)}
            trigger={
              <button
                type="button"
                className="h-11 px-3 rounded-lg border bg-card text-sm font-medium inline-flex items-center gap-1.5 hover:bg-accent/40"
                title="Pick on a map"
              >
                <MapPin className="size-4" />
                Map
              </button>
            }
          />
        </div>
      </Field>

      <div className="grid grid-cols-3 gap-3">
        <Field label="Quantity">
          <input name="qty" type="number" min={1} defaultValue={item.qty} className={inputCls} />
        </Field>
        <Field label="Value">
          <input name="value" type="number" step="0.01" defaultValue={item.value} className={inputCls} />
        </Field>
        <Field label="Status">
          <select name="status" defaultValue={item.status} className={inputCls}>
            <option value="ACTIVE">Active</option>
            <option value="LOANED">Loaned</option>
            <option value="DISPOSED">Disposed</option>
            <option value="LOST">Lost</option>
          </select>
        </Field>
      </div>

      <Field label="Tags">
        <input
          name="tags"
          type="text"
          defaultValue={item.tags.join(', ')}
          autoCapitalize="none"
          className={inputCls}
        />
      </Field>

      <Field label="Category">
        <input name="category" type="text" defaultValue={item.category ?? ''} className={inputCls} />
      </Field>
      <Field label="Brand">
        <input name="brand" type="text" defaultValue={item.brand ?? ''} className={inputCls} />
      </Field>
      <Field label="Serial number">
        <input name="serialNumber" type="text" defaultValue={item.serialNumber ?? ''} className={inputCls} />
      </Field>
      <Field label="Caption">
        <textarea name="caption" rows={2} defaultValue={item.caption ?? ''} className={inputCls + ' h-auto min-h-[2.75rem]'} />
      </Field>
      <Field label="Description">
        <textarea name="description" rows={2} defaultValue={item.description ?? ''} className={inputCls + ' h-auto min-h-[2.75rem]'} />
      </Field>
      <Field label="Notes">
        <textarea name="notes" rows={3} defaultValue={item.notes ?? ''} className={inputCls + ' h-auto min-h-[2.75rem]'} />
      </Field>

      <div className="flex gap-2 pt-2">
        <button
          type="submit"
          disabled={pending || deletePending}
          className="flex-1 h-11 rounded-lg bg-primary text-primary-foreground font-medium text-sm hover:bg-primary/90 transition-colors disabled:opacity-50"
        >
          {pending ? 'Saving…' : 'Save'}
        </button>
        <button
          type="button"
          disabled={pending || deletePending}
          onClick={() => {
            if (!confirm('Delete this item? This removes all its photos too.')) return
            startDelete(async () => {
              await deleteItem(item.id)
              router.push('/')
            })
          }}
          className="h-11 px-3 rounded-lg border bg-card text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-50"
        >
          <Trash2 className="size-5" />
        </button>
      </div>
    </form>
  )
}

function Field({
  label,
  required,
  children,
}: {
  label: string
  required?: boolean
  children: React.ReactNode
}) {
  return (
    <div className="space-y-1.5">
      <label className="text-sm font-medium">
        {label}
        {required && <span className="text-destructive"> *</span>}
      </label>
      {children}
    </div>
  )
}