import { useState, useEffect } from 'react';
import { useFormValidation, validators } from '../hooks/useFormValidation';
import { Save, RotateCcw, Check } from 'lucide-react';

export default function PersonalForm({ data, onUpdate }) {
  const [formData, setFormData] = useState(data);
  const [saved, setSaved] = useState(false);
  const { errors, validate, clearError } = useFormValidation({
    name: [validators.required('Name ist erforderlich')],
    title: [validators.required('Titel ist erforderlich')],
    email: [validators.required('E-Mail ist erforderlich'), validators.email()],
    github: [validators.url()],
    linkedin: [validators.url()]
  });
  
  useEffect(() => {
    setFormData(data);
  }, [data]);
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    clearError(name);
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate(formData)) {
      onUpdate(formData);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    }
  };
  
  const handleReset = () => {
    setFormData(data);
  };
  
  return (
    <form onSubmit={handleSubmit} className="bg-white rounded-xl p-6 shadow-sm border border-slate-100">
      <h2 className="text-xl font-semibold text-slate-900 mb-6">Persönliche Daten</h2>
      
      {saved && (
        <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2 text-green-700">
          <Check size={18} />
          Gespeichert!
        </div>
      )}
      
      <div className="grid gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            Name *
          </label>
          <input
            type="text"
            name="name"
            value={formData.name || ''}
            onChange={handleChange}
            className={`w-full px-3 py-2 rounded-lg border ${errors.name ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
          />
          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
        </div>
        
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            Titel *
          </label>
          <input
            type="text"
            name="title"
            value={formData.title || ''}
            onChange={handleChange}
            className={`w-full px-3 py-2 rounded-lg border ${errors.title ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
          />
          {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
        </div>
        
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            E-Mail *
          </label>
          <input
            type="email"
            name="email"
            value={formData.email || ''}
            onChange={handleChange}
            className={`w-full px-3 py-2 rounded-lg border ${errors.email ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
          />
          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
        </div>
        
        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              GitHub URL
            </label>
            <input
              type="url"
              name="github"
              value={formData.github || ''}
              onChange={handleChange}
              className={`w-full px-3 py-2 rounded-lg border ${errors.github ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
            />
            {errors.github && <p className="text-red-500 text-sm mt-1">{errors.github}</p>}
          </div>
          
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              LinkedIn URL
            </label>
            <input
              type="url"
              name="linkedin"
              value={formData.linkedin || ''}
              onChange={handleChange}
              className={`w-full px-3 py-2 rounded-lg border ${errors.linkedin ? 'border-red-500' : 'border-slate-200'} focus:outline-none focus:ring-2 focus:ring-primary-500`}
            />
            {errors.linkedin && <p className="text-red-500 text-sm mt-1">{errors.linkedin}</p>}
          </div>
        </div>
        
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            Standort
          </label>
          <input
            type="text"
            name="location"
            value={formData.location || ''}
            onChange={handleChange}
            className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            Intro
          </label>
          <textarea
            name="intro"
            value={formData.intro || ''}
            onChange={handleChange}
            rows={3}
            className="w-full px-3 py-2 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
          />
        </div>
      </div>
      
      <div className="flex gap-3 mt-6">
        <button
          type="submit"
          className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
        >
          <Save size={18} />
          Speichern
        </button>
        <button
          type="button"
          onClick={handleReset}
          className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
        >
          <RotateCcw size={18} />
          Zurücksetzen
        </button>
      </div>
    </form>
  );
}