import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { VALID_STATUSES } from '@/lib/violationUtils';
import { Plus } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';

export default function ViolationTimelineImportForm({ onAddEntry }) {
  const { toast } = useToast();
  const [formData, setFormData] = useState({ entry_date: '', status: '', description: '', recorded_by_name: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!formData.entry_date || !formData.status || !formData.description || !formData.recorded_by_name) {
        toast({ variant: "destructive", title: "Missing Fields" }); return;
    }
    onAddEntry({ ...formData });
    setFormData({ entry_date: '', status: '', description: '', recorded_by_name: '' });
  };

  return (
    <div className="space-y-4 border rounded-lg p-4 bg-muted/30">
      <h3 className="text-sm font-semibold">Add Entry Manually</h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div className="space-y-2"><Label>Date *</Label><Input type="date" value={formData.entry_date} onChange={(e) => setFormData(p => ({ ...p, entry_date: e.target.value }))} /></div>
        <div className="space-y-2"><Label>Status *</Label>
          <Select value={formData.status} onValueChange={(val) => setFormData(p => ({ ...p, status: val }))}>
            <SelectTrigger className="bg-card"><SelectValue placeholder="Select status" /></SelectTrigger>
            <SelectContent>{VALID_STATUSES.map(s => (<SelectItem key={s} value={s} className="capitalize">{s}</SelectItem>))}</SelectContent>
          </Select>
        </div>
        <div className="space-y-2 sm:col-span-2"><Label>Recorded By *</Label><Input value={formData.recorded_by_name} onChange={(e) => setFormData(p => ({ ...p, recorded_by_name: e.target.value }))} placeholder="Name" /></div>
        <div className="space-y-2 sm:col-span-2"><Label>Description *</Label><Textarea value={formData.description} onChange={(e) => setFormData(p => ({ ...p, description: e.target.value }))} rows={3} /></div>
      </div>
      <Button onClick={handleSubmit} variant="secondary" className="w-full"><Plus className="w-4 h-4 mr-2" /> Add to Queue</Button>
    </div>
  );
}
