'use client'

import Link from 'next/link'
import { useState, useTransition } from 'react'
import { Check, X, Pencil, Quote } from 'lucide-react'
import { VoiceNotePlayer } from '@/components/voice-note-player'
import { applySuggestion, skipSuggestion } from './actions'

interface Props {
  job: {
    id: string
    status: string
    suggestedName: string | null
    suggestedCategory: string | null
    suggestedBrand: string | null
    suggestedTags: string[]
    confidence: number | null
    errorMessage: string | null
    thumbPaths: string[]
    itemId: string
    itemName: string
    itemCategory: string | null
    itemBrand: string | null
    itemTags: string[]
    locationPath: string
    caption: string | null
    voiceNotePath: string | null
    voiceNoteMime: string | null
  }
}

export function ReviewCard({ job }: Props) {
  const [pending, startTransition] = useTransition()
  const [editing, setEditing] = useState(false)
  const [draftName, setDraftName] = useState(job.suggestedName || '')
  const [draftTags, setDraftTags] = useState(job.suggestedTags.join(', '))
  const [draftCategory, setDraftCategory] = useState(job.suggestedCategory || '')

  const hasSuggestion = job.suggestedName || job.suggestedCategory || job.suggestedTags.length > 0

  return (
    <div className="rounded-xl border bg-card p-3 space-y-3">
      <div className="flex gap-3">
        <div className="flex gap-1 shrink-0">
          {job.thumbPaths.map((tp, i) => (
            /* eslint-disable-next-line @next/next/no-img-element */
            <img
              key={tp}
              src={`/api/uploads/${tp}`}
              alt=""
              className={`size-24 rounded-lg object-cover bg-muted ${i > 0 ? 'hidden sm:block' : ''}`}
            />
          ))}
        </div>
        <div className="min-w-0 flex-1 text-sm">
          <Link href={`/items/${job.itemId}`} className="font-medium hover:underline">
            {job.itemName}
          </Link>
          <div className="text-xs text-muted-foreground truncate">{job.locationPath}</div>
          {job.thumbPaths.length > 1 && (
            <div className="text-[10px] text-muted-foreground mt-1">
              {job.thumbPaths.length} photos
            </div>
          )}
          {job.confidence != null && (
            <div className="text-[10px] text-muted-foreground mt-1">
              confidence {(job.confidence * 100).toFixed(0)}%
            </div>
          )}
        </div>
      </div>

      {job.errorMessage && (
        <div className="text-xs text-destructive bg-destructive/10 rounded px-2 py-1">
          {job.errorMessage}
        </div>
      )}

      {job.caption && (
        <div className="flex gap-2 p-2 rounded-lg border bg-muted/30 text-sm italic">
          <Quote className="size-3.5 text-muted-foreground shrink-0 mt-0.5" />
          <span>{job.caption}</span>
        </div>
      )}

      {job.voiceNotePath && (
        <VoiceNotePlayer path={job.voiceNotePath} mime={job.voiceNoteMime} />
      )}

      {hasSuggestion ? (
        <div className="text-sm space-y-1">
          {job.suggestedName && (
            <Diff label="Name" before={job.itemName} after={job.suggestedName} />
          )}
          {job.suggestedCategory && (
            <Diff label="Category" before={job.itemCategory} after={job.suggestedCategory} />
          )}
          {job.suggestedBrand && (
            <Diff label="Brand" before={job.itemBrand} after={job.suggestedBrand} />
          )}
          {job.suggestedTags.length > 0 && (
            <Diff
              label="Tags"
              before={job.itemTags.join(', ') || null}
              after={job.suggestedTags.join(', ')}
            />
          )}
        </div>
      ) : (
        <div className="text-xs text-muted-foreground italic">
          Waiting for suggestion — process via <code>npm run identify</code>.
        </div>
      )}

      {editing && (
        <div className="space-y-2 border-t pt-3">
          <Input label="Name" value={draftName} onChange={setDraftName} />
          <Input label="Category" value={draftCategory} onChange={setDraftCategory} />
          <Input label="Tags" value={draftTags} onChange={setDraftTags} />
        </div>
      )}

      <div className="flex gap-2 pt-1">
        {hasSuggestion && (
          <button
            type="button"
            disabled={pending}
            onClick={() => {
              startTransition(async () => {
                await applySuggestion(job.id, {
                  name: editing ? draftName : (job.suggestedName || job.itemName),
                  category: editing ? draftCategory : (job.suggestedCategory || job.itemCategory || null),
                  brand: job.suggestedBrand || job.itemBrand || null,
                  tags: editing
                    ? draftTags.split(',').map(s => s.trim()).filter(Boolean)
                    : job.suggestedTags,
                })
              })
            }}
            className="flex-1 h-10 rounded-lg bg-primary text-primary-foreground text-sm font-medium inline-flex items-center justify-center gap-1 disabled:opacity-50"
          >
            <Check className="size-4" /> Apply
          </button>
        )}
        <button
          type="button"
          onClick={() => setEditing(v => !v)}
          className="h-10 px-3 rounded-lg border bg-card text-sm font-medium inline-flex items-center gap-1"
        >
          <Pencil className="size-4" /> Edit
        </button>
        <button
          type="button"
          disabled={pending}
          onClick={() => startTransition(() => skipSuggestion(job.id))}
          className="h-10 px-3 rounded-lg border bg-card text-muted-foreground text-sm font-medium inline-flex items-center gap-1 disabled:opacity-50"
        >
          <X className="size-4" /> Skip
        </button>
      </div>
    </div>
  )
}

function Diff({ label, before, after }: { label: string; before: string | null; after: string }) {
  return (
    <div className="text-xs">
      <span className="text-muted-foreground">{label}:</span>{' '}
      {before && before !== after && (
        <span className="line-through text-muted-foreground/60">{before}</span>
      )}{' '}
      <span className="font-medium">{after}</span>
    </div>
  )
}

function Input({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
  return (
    <div className="space-y-1">
      <label className="text-xs text-muted-foreground">{label}</label>
      <input
        value={value}
        onChange={e => onChange(e.target.value)}
        className="flex h-10 w-full rounded-md border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      />
    </div>
  )
}