import React, { useState, useEffect } from 'react';
import { Save, X, User, Users, Home, HeartPulse, Sparkles } from 'lucide-react';
import { useTeacherStore } from '../store/teacher';

interface StudentSocialDocProps {
  student: any;
  onClose: () => void;
}

export function StudentSocialDoc({ student, onClose }: StudentSocialDocProps) {
  const { currentStudentDoc, fetchStudentDoc, saveStudentSocialDoc } = useTeacherStore();
  const [formData, setFormData] = useState<any>({
    learner_type: '',
    past_behavior: '',
    family_size: '',
    parents_available: '',
    home_environment: '',
    medical_notes: '',
    social_strengths: '',
    social_challenges: '',
    interests: '',
    other_data: ''
  });

  useEffect(() => {
    if (student?.uid) {
      fetchStudentDoc(student.uid);
    }
  }, [student]);

  useEffect(() => {
    if (currentStudentDoc) {
      setFormData(currentStudentDoc);
    }
  }, [currentStudentDoc]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await saveStudentSocialDoc({
      student_id: student.id,
      ...formData
    });
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center">
              <User size={24} />
            </div>
            <div>
              <h2 className="text-xl font-bold">Social Document</h2>
              <p className="text-sm text-gray-500">{student.first_name} {student.last_name}</p>
            </div>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600"><X size={24} /></button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-8">
          {/* Learning & Behavior */}
          <section>
            <div className="flex items-center gap-2 mb-4 text-blue-600">
              <Sparkles size={20} />
              <h3 className="font-bold">Learning & Behavior</h3>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium mb-1">Learner Type</label>
                <select 
                  className="w-full p-2 border rounded"
                  value={formData.learner_type}
                  onChange={e => setFormData({...formData, learner_type: e.target.value})}
                >
                  <option value="">Select...</option>
                  <option value="Visual">Visual</option>
                  <option value="Auditory">Auditory</option>
                  <option value="Kinesthetic">Kinesthetic</option>
                  <option value="Reading/Writing">Reading/Writing</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">Past Behavior</label>
                <textarea 
                  className="w-full p-2 border rounded"
                  rows={2}
                  value={formData.past_behavior}
                  onChange={e => setFormData({...formData, past_behavior: e.target.value})}
                />
              </div>
            </div>
          </section>

          {/* Family & Home */}
          <section>
            <div className="flex items-center gap-2 mb-4 text-green-600">
              <Home size={20} />
              <h3 className="font-bold">Family & Home Environment</h3>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium mb-1">Family Size</label>
                <input 
                  type="number"
                  className="w-full p-2 border rounded"
                  value={formData.family_size}
                  onChange={e => setFormData({...formData, family_size: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">Parents Available</label>
                <select 
                  className="w-full p-2 border rounded"
                  value={formData.parents_available}
                  onChange={e => setFormData({...formData, parents_available: e.target.value})}
                >
                  <option value="">Select...</option>
                  <option value="Both">Both</option>
                  <option value="Mother Only">Mother Only</option>
                  <option value="Father Only">Father Only</option>
                  <option value="Guardian">Guardian</option>
                </select>
              </div>
              <div className="md:col-span-3">
                <label className="block text-sm font-medium mb-1">Home Environment Details</label>
                <textarea 
                  className="w-full p-2 border rounded"
                  rows={2}
                  value={formData.home_environment}
                  onChange={e => setFormData({...formData, home_environment: e.target.value})}
                />
              </div>
            </div>
          </section>

          {/* Social & Health */}
          <section>
            <div className="flex items-center gap-2 mb-4 text-red-600">
              <HeartPulse size={20} />
              <h3 className="font-bold">Social & Health</h3>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium mb-1">Strengths</label>
                <textarea 
                  className="w-full p-2 border rounded"
                  rows={2}
                  value={formData.social_strengths}
                  onChange={e => setFormData({...formData, social_strengths: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-1">Challenges</label>
                <textarea 
                  className="w-full p-2 border rounded"
                  rows={2}
                  value={formData.social_challenges}
                  onChange={e => setFormData({...formData, social_challenges: e.target.value})}
                />
              </div>
              <div className="md:col-span-2">
                <label className="block text-sm font-medium mb-1">Medical Notes</label>
                <textarea 
                  className="w-full p-2 border rounded"
                  rows={2}
                  value={formData.medical_notes}
                  onChange={e => setFormData({...formData, medical_notes: e.target.value})}
                />
              </div>
            </div>
          </section>

          <div className="flex justify-end gap-3 pt-6 border-t border-gray-100">
            <button type="button" onClick={onClose} className="px-6 py-2 border rounded-lg hover:bg-gray-50">Cancel</button>
            <button type="submit" className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2">
              <Save size={18} />
              Save Document
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
