import { useState } from 'react'
import { useAuth } from '../contexts/AuthContext'

export default function ProfilePage() {
  const { user } = useAuth()
  const [displayName, setDisplayName] = useState(user?.username ?? '')
  const [bio, setBio] = useState('')
  const [saved, setSaved] = useState(false)

  const handleSave = (e: React.FormEvent) => {
    e.preventDefault()
    // Profile update endpoint to be wired in a future iteration
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  return (
    <div className="max-w-2xl mx-auto px-4 md:px-6 py-6 space-y-8">
      <h1 className="text-xl font-semibold text-[#172B4D]">Profile</h1>

      {/* Avatar */}
      <div className="flex items-center gap-5">
        <div className="w-16 h-16 rounded-full bg-[#0052CC] flex items-center justify-center text-white text-2xl font-bold">
          {user?.username?.[0]?.toUpperCase()}
        </div>
        <div>
          <p className="text-sm font-semibold text-[#172B4D]">{user?.username}</p>
          <p className="text-xs text-[#5E6C84]">{user?.email}</p>
        </div>
      </div>

      {/* Edit form */}
      <section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
        <div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC]">
          <h2 className="text-sm font-semibold text-[#172B4D]">Edit profile</h2>
        </div>
        <form onSubmit={handleSave} className="px-5 py-5 flex flex-col gap-5">
          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Display name</label>
            <input
              value={displayName}
              onChange={e => setDisplayName(e.target.value)}
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
            />
            <p className="text-xs text-[#5E6C84] mt-1">This is your public display name.</p>
          </div>

          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Bio</label>
            <textarea
              value={bio}
              onChange={e => setBio(e.target.value)}
              rows={3}
              placeholder="Tell others a little about yourself"
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm resize-none focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF]"
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Email</label>
            <input
              value={user?.email ?? ''}
              disabled
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm bg-[#F4F5F7] text-[#5E6C84] cursor-not-allowed"
            />
            <p className="text-xs text-[#5E6C84] mt-1">Email changes are managed in Settings → Account.</p>
          </div>

          <div className="flex items-center gap-3">
            <button
              type="submit"
              className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px]"
            >
              Save changes
            </button>
            {saved && (
              <span className="text-xs text-[#00875A] font-medium">Saved!</span>
            )}
          </div>
        </form>
      </section>
    </div>
  )
}
