dikasterion/frontend/src/pages/NewCase.jsx

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { FileText, Link as LinkIcon, Plus, Loader } from 'lucide-react'

export default function NewCase() {
  const { user } = useAuth()
  const navigate = useNavigate()
  
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [defendantUsername, setDefendantUsername] = useState('')
  const [evidenceUrls, setEvidenceUrls] = useState([''])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  if (!user) {
    return (
      <div className="max-w-3xl mx-auto px-4 py-32 text-center">
        <p className="text-dk-muted mb-4">Please log in to file a case</p>
      </div>
    )
  }

  const addEvidenceUrl = () => setEvidenceUrls([...evidenceUrls, ''])
  const updateEvidenceUrl = (index, value) => {
    const newUrls = [...evidenceUrls]
    newUrls[index] = value
    setEvidenceUrls(newUrls)
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError('')

    try {
      // API call would go here
      console.log({
        title,
        description,
        defendant_username: defendantUsername,
        evidence_urls: evidenceUrls.filter(u => u),
      })
      
      // Redirect to dashboard
      navigate('/dashboard')
    } catch (err) {
      setError(err.response?.data?.detail || 'Failed to file case')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <h1 className="font-serif text-3xl font-bold text-white mb-2">File a New Case</h1>
      <p className="text-dk-muted mb-8">
        Submit your claim. Three judges will be randomly assigned.
      </p>

      {error && (
        <div className="bg-red-900/30 border border-red-500/50 text-red-400 px-4 py-3 rounded mb-6">
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="card">
          <h2 className="font-serif text-xl font-bold text-dk-gold mb-4">Case Details</h2>
          
          <div className="space-y-4">
            <div>
              <label className="block text-sm text-dk-muted mb-1">Title *</label>
              <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="input w-full"
                placeholder="Brief summary of the dispute"
                required
                minLength={5}
              />
            </div>

            <div>
              <label className="block text-sm text-dk-muted mb-1">Description *</label>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="input w-full h-32 resize-none"
                placeholder="Detailed explanation of the claim, relevant facts, and desired outcome..."
                required
                minLength={20}
              />
            </div>
          </div>
        </div>

        <div className="card">
          <h2 className="font-serif text-xl font-bold text-dk-gold mb-4">Respondent</h2>
          <div>
            <label className="block text-sm text-dk-muted mb-1">Defendant Username *</label>
            <input
              type="text"
              value={defendantUsername}
              onChange={(e) => setDefendantUsername(e.target.value)}
              className="input w-full"
              placeholder="@username or agent identifier"
              required
            />
            <p className="text-xs text-dk-muted mt-2">
              They will be notified and must accept jurisdiction for the case to proceed.
            </p>
          </div>
        </div>

        <div className="card">
          <h2 className="font-serif text-xl font-bold text-dk-gold mb-4">Evidence</h2>
          <p className="text-sm text-dk-muted mb-4">
            Provide URLs to logs, contracts, or other supporting documents.
          </p>
          
          <div className="space-y-3">
            {evidenceUrls.map((url, index) => (
              <div key={index} className="flex gap-2">
                <LinkIcon className="h-5 w-5 text-dk-muted mt-2.5" />
                <input
                  type="url"
                  value={url}
                  onChange={(e) => updateEvidenceUrl(index, e.target.value)}
                  className="input flex-grow"
                  placeholder="https://..."
                />
              </div>
            ))}
          </div>
          
          <button
            type="button"
            onClick={addEvidenceUrl}
            className="mt-4 flex items-center gap-2 text-dk-gold hover:text-dk-gold-light text-sm"
          >
            <Plus className="h-4 w-4" />
            Add another URL
          </button>
        </div>

        <div className="flex gap-4">
          <button
            type="submit"
            disabled={loading}
            className="btn-primary flex items-center gap-2"
          >
            {loading && <Loader className="h-4 w-4 animate-spin" />}
            <FileText className="h-4 w-4" />
            File Case
          </button>
          <button
            type="button"
            onClick={() => navigate('/')}
            className="btn-secondary"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  )
}