import React from 'react';
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { X } from "lucide-react";

export default function SessionForm({ sessionData, setSessionData }) {
  const [interventionInput, setInterventionInput] = React.useState("");

  const handleInputChange = (field, value) => {
    setSessionData(prev => ({ ...prev, [field]: value }));
  };

  const addIntervention = (e) => {
    if (e.key === 'Enter' && interventionInput.trim()) {
      e.preventDefault();
      setSessionData(prev => ({
        ...prev,
        interventions_used: [...prev.interventions_used, interventionInput.trim()]
      }));
      setInterventionInput("");
    }
  };

  const removeIntervention = (index) => {
    setSessionData(prev => ({
      ...prev,
      interventions_used: prev.interventions_used.filter((_, i) => i !== index)
    }));
  };

  return (
    <div className="space-y-6">
      <div className="grid md:grid-cols-2 gap-6">
        <div className="space-y-2">
          <Label htmlFor="client_name">Client Name</Label>
          <Input
            id="client_name"
            value={sessionData.client_name}
            onChange={(e) => handleInputChange('client_name', e.target.value)}
            placeholder="Client identifier"
            className="h-11"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="session_date">Session Date</Label>
          <Input
            id="session_date"
            type="date"
            value={sessionData.session_date}
            onChange={(e) => handleInputChange('session_date', e.target.value)}
            className="h-11"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="session_type">Session Type</Label>
          <Select
            value={sessionData.session_type}
            onValueChange={(value) => handleInputChange('session_type', value)}
          >
            <SelectTrigger className="h-11">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="individual">Individual</SelectItem>
              <SelectItem value="couple">Couple</SelectItem>
              <SelectItem value="family">Family</SelectItem>
              <SelectItem value="group">Group</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="duration_minutes">Duration (minutes)</Label>
          <Input
            id="duration_minutes"
            type="number"
            value={sessionData.duration_minutes}
            onChange={(e) => handleInputChange('duration_minutes', parseInt(e.target.value))}
            className="h-11"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="mood_assessment">Mood Assessment</Label>
          <Select
            value={sessionData.mood_assessment}
            onValueChange={(value) => handleInputChange('mood_assessment', value)}
          >
            <SelectTrigger className="h-11">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="excellent">Excellent</SelectItem>
              <SelectItem value="good">Good</SelectItem>
              <SelectItem value="neutral">Neutral</SelectItem>
              <SelectItem value="struggling">Struggling</SelectItem>
              <SelectItem value="crisis">Crisis</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="risk_assessment">Risk Assessment</Label>
          <Select
            value={sessionData.risk_assessment}
            onValueChange={(value) => handleInputChange('risk_assessment', value)}
          >
            <SelectTrigger className="h-11">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="none">None</SelectItem>
              <SelectItem value="low">Low</SelectItem>
              <SelectItem value="moderate">Moderate</SelectItem>
              <SelectItem value="high">High</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor="presenting_concerns">Presenting Concerns</Label>
        <Textarea
          id="presenting_concerns"
          value={sessionData.presenting_concerns}
          onChange={(e) => handleInputChange('presenting_concerns', e.target.value)}
          placeholder="What brought the client to this session?"
          rows={3}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="session_notes">Session Notes</Label>
        <Textarea
          id="session_notes"
          value={sessionData.session_notes}
          onChange={(e) => handleInputChange('session_notes', e.target.value)}
          placeholder="Document the session... What was discussed? What progress was made?"
          rows={8}
          className="font-mono text-sm"
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="interventions">Interventions Used</Label>
        <Input
          id="interventions"
          value={interventionInput}
          onChange={(e) => setInterventionInput(e.target.value)}
          onKeyDown={addIntervention}
          placeholder="Type intervention and press Enter"
          className="h-11"
        />
        {sessionData.interventions_used.length > 0 && (
          <div className="flex flex-wrap gap-2 mt-2">
            {sessionData.interventions_used.map((intervention, index) => (
              <Badge key={index} variant="secondary" className="px-3 py-1">
                {intervention}
                <button
                  onClick={() => removeIntervention(index)}
                  className="ml-2 hover:text-red-600"
                >
                  <X className="w-3 h-3" />
                </button>
              </Badge>
            ))}
          </div>
        )}
      </div>

      <div className="space-y-2">
        <Label htmlFor="homework_assigned">Homework Assigned</Label>
        <Textarea
          id="homework_assigned"
          value={sessionData.homework_assigned}
          onChange={(e) => handleInputChange('homework_assigned', e.target.value)}
          placeholder="Any homework or tasks for the client?"
          rows={3}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="next_session_goals">Goals for Next Session</Label>
        <Textarea
          id="next_session_goals"
          value={sessionData.next_session_goals}
          onChange={(e) => handleInputChange('next_session_goals', e.target.value)}
          placeholder="What do you want to focus on next time?"
          rows={3}
        />
      </div>
    </div>
  );
}