import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Camera } from 'lucide-react';
import { Input } from '../components/ui/Input';
import { GradientButton } from '../components/ui/GradientButton';
import { Card } from '../components/ui/Card';
import { Avatar } from '../components/ui/Avatar';
import { Toggle } from '../components/ui/Toggle';
import { mockCurrentUser } from '../utils/mockData';
import { useAuth } from '../context/AuthContext';

export function UpdateProfilePage() {
  const navigate = useNavigate();
  const { user } = useAuth();
  const currentUser = user || mockCurrentUser;

  const [fullName, setFullName] = useState(currentUser.fullName);
  const [email] = useState(currentUser.email);
  const [phone, setPhone] = useState(currentUser.phone || '');
  const [location, setLocation] = useState(currentUser.location || '');
  const [bio, setBio] = useState(currentUser.bio || '');
  const [showEmail, setShowEmail] = useState(currentUser.showEmail);
  const [showPhone, setShowPhone] = useState(currentUser.showPhone);
  const [showLocation, setShowLocation] = useState(currentUser.showLocation);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    navigate('/');
  };

  return (
    <div className="max-w-lg mx-auto px-4 py-12">
      <Card padding="lg">
        <div className="text-center mb-8">
          <h1 className="text-2xl font-bold text-gray-900">Update Profile Information</h1>
          <p className="text-sm text-gray-500 mt-2">Edit your profile and update information shown publicly</p>
        </div>

        <div className="flex justify-center mb-8">
          <div className="relative">
            <Avatar name={fullName} size="xl" />
            <button type="button" className="absolute -bottom-1 -right-1 p-2 bg-gradient-to-r from-pink-500 to-primary-600 rounded-full text-white shadow-lg cursor-pointer">
              <Camera className="w-4 h-4" />
            </button>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="space-y-5">
          <Input label="Full Name" value={fullName} onChange={(e) => setFullName(e.target.value)} required />

          <div className="flex items-end gap-3">
            <div className="flex-1">
              <Input label="Email" value={email} disabled />
            </div>
            <div className="pb-0.5">
              <Toggle checked={showEmail} onChange={setShowEmail} label="Public" />
            </div>
          </div>

          <div className="flex items-end gap-3">
            <div className="flex-1">
              <Input label="Phone" value={phone} onChange={(e) => setPhone(e.target.value)} />
            </div>
            <div className="pb-0.5">
              <Toggle checked={showPhone} onChange={setShowPhone} label="Public" />
            </div>
          </div>

          <div className="flex items-end gap-3">
            <div className="flex-1">
              <Input label="Location" value={location} onChange={(e) => setLocation(e.target.value)} />
            </div>
            <div className="pb-0.5">
              <Toggle checked={showLocation} onChange={setShowLocation} label="Public" />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1.5">Bio</label>
            <textarea value={bio} onChange={(e) => setBio(e.target.value)} rows={3}
              className="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm placeholder:text-gray-400 focus:border-primary-400 focus:ring-2 focus:ring-primary-100 focus:outline-none resize-none" />
          </div>

          <GradientButton type="submit" className="w-full" size="lg">Save Changes</GradientButton>
        </form>
      </Card>
    </div>
  );
}
