'use client'

import { useState } from 'react'
import { Flag, X, Loader2, Check } from 'lucide-react'

export default function ReportPage({ params }: { params: Promise<{ slug: string }> }) {
  const [reason, setReason] = useState('')
  const [details, setDetails] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [done, setDone] = useState(false)
  const [slug, setSlug] = useState('')

  useState(() => {
    params.then(p => setSlug(p.slug))
  })

  const handleSubmit = async () => {
    setSubmitting(true)
    try {
      await fetch('/api/notes/report', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ slug, reason, details }),
      })
      setDone(true)
    } catch {}
    finally { setSubmitting(false) }
  }

  return (
    <div style={{ minHeight: '100vh', background: '#FAF9F5', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }}>
      <div style={{ maxWidth: '440px', width: '100%', background: 'white', borderRadius: '16px', border: '1px solid rgba(0,0,0,0.08)', padding: '32px' }}>
        {done ? (
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: '48px', height: '48px', borderRadius: '50%', background: '#f0fdf4', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
              <Check size={24} style={{ color: '#22c55e' }} />
            </div>
            <h2 style={{ fontFamily: 'Georgia, serif', fontSize: '18px', fontWeight: 600, margin: '0 0 8px' }}>Signalement envoyé</h2>
            <p style={{ fontSize: '14px', color: '#666', margin: 0 }}>Merci. Notre équipe va examiner ce contenu dans les plus brefs délais.</p>
          </div>
        ) : (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '20px' }}>
              <div style={{ width: '32px', height: '32px', borderRadius: '8px', background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Flag size={16} style={{ color: '#ef4444' }} />
              </div>
              <h2 style={{ fontFamily: 'Georgia, serif', fontSize: '17px', fontWeight: 600, margin: 0 }}>Signaler ce contenu</h2>
            </div>

            <div style={{ marginBottom: '16px' }}>
              <label style={{ fontSize: '12px', fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em', display: 'block', marginBottom: '8px' }}>Motif</label>
              <select value={reason} onChange={e => setReason(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: '8px', border: '1px solid #ddd', fontSize: '14px', outline: 'none', background: 'white' }}>
                <option value="">Sélectionner...</option>
                <option value="illegal">Contenu illégal</option>
                <option value="hate">Discours de haine</option>
                <option value="violence">Violence / Menaces</option>
                <option value="sexual">Contenu sexuel</option>
                <option value="harassment">Harcèlement</option>
                <option value="copyright">Violation de copyright</option>
                <option value="spam">Spam / Arnaque</option>
                <option value="other">Autre</option>
              </select>
            </div>

            <div style={{ marginBottom: '20px' }}>
              <label style={{ fontSize: '12px', fontWeight: 600, color: '#666', textTransform: 'uppercase', letterSpacing: '0.05em', display: 'block', marginBottom: '8px' }}>Détails (optionnel)</label>
              <textarea value={details} onChange={e => setDetails(e.target.value)} rows={3} placeholder="Expliquez le problème..." style={{ width: '100%', padding: '10px 12px', borderRadius: '8px', border: '1px solid #ddd', fontSize: '14px', outline: 'none', resize: 'none', background: 'white' }} />
            </div>

            <button
              onClick={handleSubmit}
              disabled={!reason || submitting}
              style={{
                width: '100%', padding: '12px', borderRadius: '10px', border: 'none',
                background: !reason || submitting ? '#ccc' : '#ef4444',
                color: 'white', fontSize: '14px', fontWeight: 600, cursor: !reason || submitting ? 'not-allowed' : 'pointer',
              }}
            >
              {submitting ? <Loader2 size={16} className="animate-spin" /> : 'Signaler'}
            </button>
          </>
        )}
      </div>
    </div>
  )
}