'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'

export function AlertForm({ productId }: { productId: string }) {
  const [type, setType] = useState<'target_price' | 'all_time_low' | 'percent_drop'>('target_price')
  const [threshold, setThreshold] = useState('')
  const [percent, setPercent] = useState('10')
  const [lookback, setLookback] = useState('7')
  const router = useRouter()

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    let config: Record<string, unknown> = {}
    if (type === 'target_price') config = { threshold: Number(threshold) }
    if (type === 'percent_drop') config = { percent: Number(percent), lookback_days: Number(lookback) }
    const res = await fetch('/api/alerts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId, type, config }),
    })
    if (res.ok) {
      setThreshold('')
      router.refresh()
    }
  }

  return (
    <form onSubmit={submit} className="space-y-2 rounded border border-zinc-800 p-3">
      <div className="flex gap-2">
        <select value={type} onChange={(e) => setType(e.target.value as typeof type)} className="rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm">
          <option value="target_price">Zielpreis</option>
          <option value="all_time_low">Allzeit-Tief</option>
          <option value="percent_drop">% Drop</option>
        </select>
        {type === 'target_price' && (
          <input type="number" step="0.01" required value={threshold} onChange={(e) => setThreshold(e.target.value)}
            placeholder="€" className="w-24 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
        )}
        {type === 'percent_drop' && (
          <>
            <input type="number" required value={percent} onChange={(e) => setPercent(e.target.value)}
              className="w-16 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
            <span className="self-center text-xs">% in</span>
            <input type="number" required value={lookback} onChange={(e) => setLookback(e.target.value)}
              className="w-16 rounded border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm" />
            <span className="self-center text-xs">Tagen</span>
          </>
        )}
        <button type="submit" className="rounded bg-emerald-600 px-3 py-1 text-sm hover:bg-emerald-500">+ Alert</button>
      </div>
    </form>
  )
}