'use client';

import { useState, useEffect } from 'react';
import { MobileLayout } from '../../../../components/mobile-layout';
import { User, Mail, Phone, MapPin, Briefcase, Calendar, Camera, Save, Edit2, Fingerprint, Loader2 } from 'lucide-react';
import { useBiometrics } from '../../../../hooks/use-biometrics';

export default function ProfilePage() {
  const [user, setUser] = useState<any>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState({
    full_name: '',
    email: '',
    phone: '',
    region: '',
    district: '',
    role: '',
  });
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const { registerBiometric, loading: bioLoading, error: bioError } = useBiometrics();

  useEffect(() => {
    // Load user from localStorage
    const userData = localStorage.getItem('gcx_fshs_user');
    if (userData) {
      const parsedUser = JSON.parse(userData);
      setUser(parsedUser);
      setFormData({
        full_name: parsedUser.full_name || parsedUser.name || '',
        email: parsedUser.email || '',
        phone: parsedUser.phone || '',
        region: parsedUser.region || '',
        district: parsedUser.district || '',
        role: parsedUser.role || '',
      });
    }
  }, []);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleBiometricRegister = async () => {
    const success = await registerBiometric();
    if (success) {
      setMessage({ type: 'success', text: 'Biometric login enabled successfully!' });
    } else {
      setMessage({ type: 'error', text: bioError || 'Failed to enable biometrics' });
    }
  };

  const handleSave = () => {
    // Update user in localStorage
    const updatedUser = { ...user, ...formData };
    localStorage.setItem('gcx_fshs_user', JSON.stringify(updatedUser));
    setUser(updatedUser);
    setIsEditing(false);
    setMessage({ type: 'success', text: 'Profile updated successfully!' });
    setTimeout(() => setMessage(null), 3000);
  };

  const handleCancel = () => {
    // Reset form data
    if (user) {
      setFormData({
        full_name: user.full_name || user.name || '',
        email: user.email || '',
        phone: user.phone || '',
        region: user.region || '',
        district: user.district || '',
        role: user.role || '',
      });
    }
    setIsEditing(false);
  };

  const getInitial = (name: string) => {
    return name ? name.charAt(0).toUpperCase() : 'U';
  };

  if (!user) {
    return (
      <MobileLayout title="Profile">
        <div className="flex min-h-screen items-center justify-center p-4">
          <div className="text-center">
            <div className="h-8 w-8 animate-spin rounded-full border-4 border-brand border-t-transparent mx-auto mb-4"></div>
            <p className="text-slate-600">Loading profile...</p>
          </div>
        </div>
      </MobileLayout>
    );
  }

  return (
    <MobileLayout title="Profile">
      <div className="space-y-4 p-4">
        {/* Header */}
        <div className="rounded-xl bg-white p-4 shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-xl font-bold text-slate-900">My Profile</h1>
              <p className="mt-1 text-sm text-slate-600">Manage your account information</p>
            </div>
            {!isEditing && (
              <button
                onClick={() => setIsEditing(true)}
                className="flex items-center gap-2 rounded-lg bg-brand px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-brand/90"
              >
                <Edit2 className="h-4 w-4" />
                Edit
              </button>
            )}
          </div>
        </div>

        {/* Message Alert */}
        {message && (
          <div className={`rounded-xl border px-4 py-3 ${
            message.type === 'success' 
              ? 'border-green-200 bg-green-50 text-green-800' 
              : 'border-red-200 bg-red-50 text-red-800'
          }`}>
            <p className="text-sm font-medium">{message.text}</p>
          </div>
        )}

        {/* Profile Picture */}
        <div className="rounded-xl bg-white p-6 shadow-sm">
          <div className="flex flex-col items-center">
            <div className="relative">
              <div className="flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-brand to-blue-600 text-4xl font-bold text-white shadow-lg">
                {getInitial(formData.full_name)}
              </div>
              <button className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-lg border-2 border-slate-100 hover:bg-slate-50">
                <Camera className="h-4 w-4 text-slate-600" />
              </button>
            </div>
            <div className="mt-4 text-center">
              <div className="text-lg font-bold text-slate-900">{formData.full_name}</div>
              <div className="mt-1 inline-flex items-center gap-1.5 rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700">
                <span className="h-1.5 w-1.5 rounded-full bg-blue-500"></span>
                {formData.role?.replace('_', ' ')}
              </div>
            </div>
          </div>
        </div>

        {/* Personal Information */}
        <div className="rounded-xl bg-white p-4 shadow-sm">
          <div className="mb-4 flex items-center gap-2 text-slate-700">
            <User className="h-5 w-5 text-brand" />
            <h2 className="font-semibold">Personal Information</h2>
          </div>
          <div className="space-y-4 border-t border-slate-100 pt-4">
            {/* Full Name */}
            <div>
              <label className="mb-1 block text-xs font-medium text-slate-500">Full Name</label>
              {isEditing ? (
                <input
                  type="text"
                  name="full_name"
                  value={formData.full_name}
                  onChange={handleInputChange}
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20"
                />
              ) : (
                <div className="flex items-center gap-2 text-slate-900">
                  <User className="h-4 w-4 text-slate-400" />
                  <span>{formData.full_name}</span>
                </div>
              )}
            </div>

            {/* Email */}
            <div>
              <label className="mb-1 block text-xs font-medium text-slate-500">Email Address</label>
              {isEditing ? (
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleInputChange}
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20"
                />
              ) : (
                <div className="flex items-center gap-2 text-slate-900">
                  <Mail className="h-4 w-4 text-slate-400" />
                  <span>{formData.email}</span>
                </div>
              )}
            </div>

            {/* Phone */}
            <div>
              <label className="mb-1 block text-xs font-medium text-slate-500">Phone Number</label>
              {isEditing ? (
                <input
                  type="tel"
                  name="phone"
                  value={formData.phone}
                  onChange={handleInputChange}
                  placeholder="+233 XX XXX XXXX"
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20"
                />
              ) : (
                <div className="flex items-center gap-2 text-slate-900">
                  <Phone className="h-4 w-4 text-slate-400" />
                  <span>{formData.phone || 'Not provided'}</span>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Work Information */}
        <div className="rounded-xl bg-white p-4 shadow-sm">
          <div className="mb-4 flex items-center gap-2 text-slate-700">
            <Briefcase className="h-5 w-5 text-brand" />
            <h2 className="font-semibold">Work Information</h2>
          </div>
          <div className="space-y-4 border-t border-slate-100 pt-4">
            {/* Region */}
            <div>
              <label className="mb-1 block text-xs font-medium text-slate-500">Region</label>
              {isEditing ? (
                <select
                  name="region"
                  value={formData.region}
                  onChange={handleInputChange}
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20"
                >
                  <option value="">Select Region</option>
                  <option value="Greater Accra">Greater Accra</option>
                  <option value="Ashanti">Ashanti</option>
                  <option value="Western">Western</option>
                  <option value="Eastern">Eastern</option>
                  <option value="Central">Central</option>
                  <option value="Northern">Northern</option>
                  <option value="Upper East">Upper East</option>
                  <option value="Upper West">Upper West</option>
                  <option value="Volta">Volta</option>
                  <option value="Brong Ahafo">Brong Ahafo</option>
                </select>
              ) : (
                <div className="flex items-center gap-2 text-slate-900">
                  <MapPin className="h-4 w-4 text-slate-400" />
                  <span>{formData.region || 'Not assigned'}</span>
                </div>
              )}
            </div>

            {/* District */}
            <div>
              <label className="mb-1 block text-xs font-medium text-slate-500">District</label>
              {isEditing ? (
                <input
                  type="text"
                  name="district"
                  value={formData.district}
                  onChange={handleInputChange}
                  placeholder="Enter district"
                  className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20"
                />
              ) : (
                <div className="flex items-center gap-2 text-slate-900">
                  <MapPin className="h-4 w-4 text-slate-400" />
                  <span>{formData.district || 'Not assigned'}</span>
                </div>
              )}
            </div>

            {/* Role */}
            <div>
              <label className="mb-1 block text-xs font-medium text-slate-500">Role</label>
              <div className="flex items-center gap-2 text-slate-900">
                <Briefcase className="h-4 w-4 text-slate-400" />
                <span>{formData.role?.replace('_', ' ')}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Account Details */}
        <div className="rounded-xl bg-white p-4 shadow-sm">
          <div className="mb-4 flex items-center gap-2 text-slate-700">
            <Calendar className="h-5 w-5 text-brand" />
            <h2 className="font-semibold">Account Details</h2>
          </div>
          <div className="space-y-3 border-t border-slate-100 pt-4 text-sm">
            <div className="flex justify-between">
              <span className="text-slate-500">Account Status</span>
              <span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-2.5 py-1 text-xs font-medium text-green-700">
                <span className="h-1.5 w-1.5 rounded-full bg-green-500"></span>
                Active
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-slate-500">Member Since</span>
              <span className="font-medium text-slate-900">
                {user.created_at 
                  ? new Date(user.created_at).toLocaleDateString('en-US', { 
                      month: 'long', 
                      year: 'numeric' 
                    })
                  : 'January 2025'}
              </span>
            </div>
            <div className="flex justify-between">
              <span className="text-slate-500">Last Login</span>
              <span className="font-medium text-slate-900">
                {user.last_login_at 
                  ? (() => {
                      const loginDate = new Date(user.last_login_at);
                      const today = new Date();
                      const isToday = loginDate.toDateString() === today.toDateString();
                      
                      if (isToday) {
                        return 'Today at ' + loginDate.toLocaleTimeString('en-US', { 
                          hour: 'numeric', 
                          minute: '2-digit',
                          hour12: true 
                        });
                      } else {
                        return loginDate.toLocaleDateString('en-US', { 
                          month: 'short',
                          day: 'numeric',
                          hour: 'numeric',
                          minute: '2-digit',
                          hour12: true
                        });
                      }
                    })()
                  : 'Today at ' + new Date().toLocaleTimeString('en-US', { 
                      hour: 'numeric', 
                      minute: '2-digit',
                      hour12: true 
                    })}
              </span>
            </div>
          </div>
        </div>

        {/* Security */}
        <div className="rounded-xl bg-white p-4 shadow-sm">
          <div className="mb-4 flex items-center gap-2 text-slate-700">
            <Fingerprint className="h-5 w-5 text-brand" />
            <h2 className="font-semibold">Security</h2>
          </div>
          <div className="space-y-4 border-t border-slate-100 pt-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium text-slate-900">Biometric Login</p>
                <p className="text-xs text-slate-500">Use fingerprint or Face ID to log in</p>
              </div>
              <button
                onClick={handleBiometricRegister}
                disabled={bioLoading}
                className="flex items-center gap-2 rounded-lg bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-200 disabled:opacity-50"
              >
                {bioLoading ? (
                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-slate-500 border-t-transparent"></span>
                ) : (
                  <Fingerprint className="h-4 w-4" />
                )}
                {bioLoading ? 'Enabling...' : 'Enable'}
              </button>
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        {isEditing && (
          <div className="flex gap-3">
            <button
              onClick={handleCancel}
              className="flex-1 rounded-xl border-2 border-slate-300 px-4 py-3 font-semibold text-slate-700 transition-colors hover:bg-slate-50"
            >
              Cancel
            </button>
            <button
              onClick={handleSave}
              className="flex flex-1 items-center justify-center gap-2 rounded-xl bg-brand px-4 py-3 font-semibold text-white shadow-sm transition-colors hover:bg-brand/90"
            >
              <Save className="h-5 w-5" />
              Save Changes
            </button>
          </div>
        )}

        <div className="h-4"></div>
      </div>
    </MobileLayout>
  );
}