'use client';

import { useState } from 'react';
import { SettingsSidebar } from '../component/SettingsSidebar';

export default function PasswordSecurityPage() {
  const [formData, setFormData] = useState({
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
  });

  const [showPasswords, setShowPasswords] = useState({
    current: false,
    new: false,
    confirm: false,
  });

  const handleChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => {
    setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] }));
  };

  const handleSave = () => {
    if (formData.newPassword !== formData.confirmPassword) {
      alert('Passwords do not match');
      return;
    }
    console.log('Updating password');
  };

  return (
    <div className="flex flex-col lg:flex-row gap-6">
      {/* Left Sidebar */}
      <SettingsSidebar />

      {/* Main Content */}
      <div className="flex-1">
        {/* Header Card */}
        <div className="border border-[#00293d]/10 rounded-[15px] px-6 py-4 mb-4 bg-white">
          <h1 className="font-fractul font-bold text-[15px] leading-[18px] text-[#00293D]">
            Password Security
          </h1>
        </div>

        {/* Password Form */}
        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6">
          <div className="mb-6">
            <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
              Change Password
            </h2>
            <p className="font-serif text-[12px] text-[#00293D]/60">
              Ensure your account is using a strong password to stay secure
            </p>
          </div>

          {/* Form Fields */}
          <div className="space-y-6 max-w-md">
            {/* Current Password */}
            <div>
              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
                Current Password
              </label>
              <div className="relative">
                <input
                  type={showPasswords.current ? 'text' : 'password'}
                  value={formData.currentPassword}
                  onChange={(e) => handleChange('currentPassword', e.target.value)}
                  placeholder="Enter current password"
                  className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
                />
                <button
                  type="button"
                  onClick={() => toggleShowPassword('current')}
                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
                >
                  {showPasswords.current ? '🙈' : '👁️'}
                </button>
              </div>
            </div>

            {/* New Password */}
            <div>
              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
                New Password
              </label>
              <div className="relative">
                <input
                  type={showPasswords.new ? 'text' : 'password'}
                  value={formData.newPassword}
                  onChange={(e) => handleChange('newPassword', e.target.value)}
                  placeholder="Enter new password"
                  className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
                />
                <button
                  type="button"
                  onClick={() => toggleShowPassword('new')}
                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
                >
                  {showPasswords.new ? '🙈' : '👁️'}
                </button>
              </div>
              <p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
                Minimum 8 characters with at least one uppercase, lowercase, and number
              </p>
            </div>

            {/* Confirm Password */}
            <div>
              <label className="block text-[12px] font-medium text-[#00293D]/70 font-serif mb-2">
                Confirm New Password
              </label>
              <div className="relative">
                <input
                  type={showPasswords.confirm ? 'text' : 'password'}
                  value={formData.confirmPassword}
                  onChange={(e) => handleChange('confirmPassword', e.target.value)}
                  placeholder="Confirm new password"
                  className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]"
                />
                <button
                  type="button"
                  onClick={() => toggleShowPassword('confirm')}
                  className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
                >
                  {showPasswords.confirm ? '🙈' : '👁️'}
                </button>
              </div>
            </div>
          </div>

          {/* Save Button */}
          <div className="mt-8">
            <button
              onClick={handleSave}
              className="px-8 py-3 bg-[#e58625] text-white rounded-[15px] font-fractul font-medium text-[14px] hover:bg-[#d47920] transition-colors"
            >
              Update Password
            </button>
          </div>
        </div>

        {/* Two-Factor Authentication Section */}
        <div className="border border-[#00293d]/10 rounded-[15px] bg-white p-6 mt-4">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="font-fractul font-bold text-[16px] text-[#00293D] mb-2">
                Two-Factor Authentication
              </h2>
              <p className="font-serif text-[12px] text-[#00293D]/60">
                Add an extra layer of security to your account
              </p>
            </div>
            <button className="px-6 py-2 border border-[#e58625] text-[#e58625] rounded-[15px] font-serif text-[12px] hover:bg-[#e58625]/10 transition-colors">
              Enable 2FA
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}