import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useSSHKeys, useAddSSHKey, useDeleteSSHKey } from '../api/queries/sshkeys'

export default function SettingsPage() {
  const { user, logout } = useAuth()
  const [currentPw, setCurrentPw] = useState('')
  const [newPw, setNewPw] = useState('')

  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]">Settings</h1>

      {/* Account info */}
      <section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
        <div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC] flex items-center justify-between">
          <h2 className="text-sm font-semibold text-[#172B4D]">Account</h2>
          <Link to="/profile" className="text-xs text-[#0052CC] hover:underline">Edit profile →</Link>
        </div>
        <div className="px-5 py-4 flex flex-col gap-3">
          <Row label="Username" value={user?.username} />
          <Row label="Email" value={user?.email} />
          <Row label="Role" value={user?.isAdmin ? 'Administrator' : 'Member'} />
        </div>
      </section>

      {/* Change password */}
      <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]">Change password</h2>
        </div>
        <form
          className="px-5 py-5 flex flex-col gap-4"
          onSubmit={e => { e.preventDefault(); setCurrentPw(''); setNewPw('') }}
        >
          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Current password</label>
            <input
              type="password" value={currentPw} onChange={e => setCurrentPw(e.target.value)}
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
            />
          </div>
          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">New password</label>
            <input
              type="password" value={newPw} onChange={e => setNewPw(e.target.value)}
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
            />
          </div>
          <div>
            <button
              type="submit"
              className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px]"
            >
              Update password
            </button>
          </div>
        </form>
      </section>

      <SSHKeySection />

      {/* Danger zone */}
      <section className="border border-[#FFEBE6] rounded-lg overflow-hidden">
        <div className="px-5 py-4 border-b border-[#FFEBE6] bg-[#FFEBE6]/50">
          <h2 className="text-sm font-semibold text-[#BF2600]">Danger zone</h2>
        </div>
        <div className="px-5 py-4 flex flex-col gap-3">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[#172B4D]">Sign out</p>
              <p className="text-xs text-[#5E6C84]">End your current session on this device.</p>
            </div>
            <button
              onClick={logout}
              className="px-4 py-2 rounded border border-[#DE350B] text-[#DE350B] text-sm font-medium hover:bg-[#FFEBE6] min-h-[44px]"
            >
              Sign out
            </button>
          </div>
        </div>
      </section>
    </div>
  )
}

function Row({ label, value }: { label: string; value?: string }) {
  return (
    <div className="flex items-center justify-between py-1">
      <span className="text-xs text-[#5E6C84] w-24 shrink-0">{label}</span>
      <span className="text-sm text-[#172B4D] font-medium">{value}</span>
    </div>
  )
}

function SSHKeySection() {
  const { data: keys } = useSSHKeys()
  const addKey = useAddSSHKey()
  const deleteKey = useDeleteSSHKey()
  const [showAdd, setShowAdd] = useState(false)
  const [title, setTitle] = useState('')
  const [publicKey, setPublicKey] = useState('')

  const handleAdd = async (e: React.FormEvent) => {
    e.preventDefault()
    await addKey.mutateAsync({ title, publicKey })
    setTitle(''); setPublicKey(''); setShowAdd(false)
  }

  return (
    <section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
      <div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC] flex items-center justify-between">
        <h2 className="text-sm font-semibold text-[#172B4D]">SSH keys</h2>
        <button onClick={() => setShowAdd(s => !s)}
          className="text-xs text-[#0052CC] hover:underline font-medium">
          {showAdd ? 'Cancel' : '+ Add key'}
        </button>
      </div>

      {showAdd && (
        <form onSubmit={handleAdd} className="px-5 py-4 border-b border-[#DFE1E6] space-y-3 bg-[#FAFBFC]">
          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Title</label>
            <input value={title} onChange={e => setTitle(e.target.value)} required placeholder="e.g. MacBook Pro"
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]" />
          </div>
          <div>
            <label className="block text-xs font-semibold text-[#172B4D] mb-1">Public key</label>
            <textarea value={publicKey} onChange={e => setPublicKey(e.target.value)} required rows={3}
              placeholder="ssh-ed25519 AAAA… or ssh-rsa AAAA…"
              className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-xs font-mono resize-none focus:outline-none focus:border-[#4C9AFF]" />
          </div>
          {addKey.isError && (
            <p className="text-xs text-[#DE350B]">{addKey.error instanceof Error ? addKey.error.message : 'Error'}</p>
          )}
          <button type="submit" disabled={addKey.isPending}
            className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[44px]">
            {addKey.isPending ? 'Adding…' : 'Add SSH key'}
          </button>
        </form>
      )}

      {!keys?.length ? (
        <div className="px-5 py-5 text-sm text-[#5E6C84]">No SSH keys added yet.</div>
      ) : (
        <ul>
          {keys.map(key => (
            <li key={key.id} className="flex items-center gap-3 px-5 py-3 border-b border-[#DFE1E6] last:border-0">
              <svg width="16" height="16" fill="none" stroke="#5E6C84" strokeWidth="1.5" viewBox="0 0 24 24" className="shrink-0">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 0 1 21.75 8.25Z" />
              </svg>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-[#172B4D] truncate">{key.title}</p>
                <p className="text-xs font-mono text-[#5E6C84] truncate">{key.fingerprint}</p>
              </div>
              <button onClick={() => deleteKey.mutate(key.id)}
                className="text-xs px-3 py-1.5 rounded border border-[#DE350B] text-[#DE350B] hover:bg-[#FFEBE6] shrink-0 min-h-[32px]">
                Delete
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}