import { useState } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'

const ReportPage: NextPage = () => {
  const [formData, setFormData] = useState({
    source_url: '',
    reporter_email: '',
    reporter_name: '',
    description: '',
    categories: [] as string[]
  })
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)

  const categories = [
    { id: 'hoax', name: 'Hoax' },
    { id: 'hate-speech', name: 'Hate Speech' },
    { id: 'violence', name: 'Violence' },
    { id: 'racism', name: 'Racism' },
    { id: 'conspiracy', name: 'Conspiracy' },
    { id: 'propaganda', name: 'Propaganda' }
  ]

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

    try {
      const response = await fetch('/api/reports', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      })

      if (response.ok) {
        setSuccess(true)
        setFormData({
          source_url: '',
          reporter_email: '',
          reporter_name: '',
          description: '',
          categories: []
        })
      }
    } catch (error) {
      console.error('Failed to submit report:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleCategoryChange = (categoryId: string, checked: boolean) => {
    if (checked) {
      setFormData(prev => ({
        ...prev,
        categories: [...prev.categories, categoryId]
      }))
    } else {
      setFormData(prev => ({
        ...prev,
        categories: prev.categories.filter(id => id !== categoryId)
      }))
    }
  }

  if (success) {
    return (
      <div>
        <Head>
          <title>Hlásenie odoslané - Infohliadka</title>
        </Head>
        <div style={{ padding: '20px', textAlign: 'center' }}>
          <h1>Ďakujeme!</h1>
          <p>Vaše hlásenie bolo úspešne odoslané a bude preverené našimi moderátormi.</p>
          <Link href="/" style={{ color: '#3b82f6' }}>← Späť na hlavnú stránku</Link>
        </div>
      </div>
    )
  }

  return (
    <div>
      <Head>
        <title>Nahlásiť problematický obsah - Infohliadka</title>
      </Head>

      <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
        <h1>Nahlásiť problematický obsah</h1>
        
        <form onSubmit={handleSubmit} style={{ marginTop: '30px' }}>
          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              URL stránky *
            </label>
            <input
              type="url"
              required
              value={formData.source_url}
              onChange={(e) => setFormData(prev => ({ ...prev, source_url: e.target.value }))}
              style={{ 
                width: '100%', 
                padding: '8px', 
                border: '1px solid #d1d5db', 
                borderRadius: '4px' 
              }}
              placeholder="https://example.com"
            />
          </div>

          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Váš email (voliteľný)
            </label>
            <input
              type="email"
              value={formData.reporter_email}
              onChange={(e) => setFormData(prev => ({ ...prev, reporter_email: e.target.value }))}
              style={{ 
                width: '100%', 
                padding: '8px', 
                border: '1px solid #d1d5db', 
                borderRadius: '4px' 
              }}
              placeholder="vas@email.com"
            />
          </div>

          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Vaše meno (voliteľné)
            </label>
            <input
              type="text"
              value={formData.reporter_name}
              onChange={(e) => setFormData(prev => ({ ...prev, reporter_name: e.target.value }))}
              style={{ 
                width: '100%', 
                padding: '8px', 
                border: '1px solid #d1d5db', 
                borderRadius: '4px' 
              }}
              placeholder="Vaše meno"
            />
          </div>

          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Kategórie problému
            </label>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
              {categories.map(category => (
                <label key={category.id} style={{ display: 'flex', alignItems: 'center' }}>
                  <input
                    type="checkbox"
                    checked={formData.categories.includes(category.id)}
                    onChange={(e) => handleCategoryChange(category.id, e.target.checked)}
                    style={{ marginRight: '8px' }}
                  />
                  {category.name}
                </label>
              ))}
            </div>
          </div>

          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Popis problému *
            </label>
            <textarea
              required
              value={formData.description}
              onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
              style={{ 
                width: '100%', 
                padding: '8px', 
                border: '1px solid #d1d5db', 
                borderRadius: '4px',
                minHeight: '100px'
              }}
              placeholder="Popíšte prečo považujete tento obsah za problematický..."
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            style={{
              padding: '12px 24px',
              backgroundColor: loading ? '#9ca3af' : '#3b82f6',
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              cursor: loading ? 'not-allowed' : 'pointer'
            }}
          >
            {loading ? 'Odesilá sa...' : 'Odoslať hlásenie'}
          </button>
        </form>

        <div style={{ marginTop: '30px' }}>
          <Link href="/" style={{ color: '#6b7280' }}>← Späť na hlavnú stránku</Link>
        </div>
      </div>
    </div>
  )
}

export default ReportPage