import { useState } from 'react';
import { useAuth } from '../contexts/AuthContext.jsx';
import { useToast } from '../contexts/ToastContext.jsx';
import { api } from '../utils/api.js';
import Avatar from './Avatar.jsx';

export default function ProfileModal({ onClose }) {
  const { user, updateUser } = useAuth();
  const toast = useToast();

  const [displayName, setDisplayName] = useState(user?.display_name || '');
  const [savedDisplayName, setSavedDisplayName] = useState(user?.display_name || '');
  const [displayNameWarning, setDisplayNameWarning] = useState('');
  const [aboutMe, setAboutMe] = useState(user?.about_me || '');
  const [currentPw, setCurrentPw] = useState('');
  const [newPw, setNewPw] = useState('');
  const [confirmPw, setConfirmPw] = useState('');
  const [loading, setLoading] = useState(false);
  const [tab, setTab] = useState('profile'); // 'profile' | 'password' | 'notifications'
  const [pushTesting, setPushTesting] = useState(false);
  const [pushResult, setPushResult] = useState(null);
  const [hideAdminTag, setHideAdminTag] = useState(!!user?.hide_admin_tag);
  const [allowDm, setAllowDm] = useState(user?.allow_dm !== 0);

  const handleSaveProfile = async () => {
    if (displayNameWarning) return toast('Display name is already in use', 'error');
    setLoading(true);
    try {
      const { user: updated } = await api.updateProfile({ displayName, aboutMe, hideAdminTag, allowDm });
      updateUser(updated);
      setSavedDisplayName(displayName);
      toast('Profile updated', 'success');
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  const handleAvatarUpload = async (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    try {
      const { avatarUrl } = await api.uploadAvatar(file);
      updateUser({ avatar: avatarUrl });
      toast('Avatar updated', 'success');
    } catch (e) {
      toast(e.message, 'error');
    }
  };

  const handleChangePassword = async () => {
    if (newPw !== confirmPw) return toast('Passwords do not match', 'error');
    if (newPw.length < 8) return toast('Password too short (min 8)', 'error');
    setLoading(true);
    try {
      await api.changePassword({ currentPassword: currentPw, newPassword: newPw });
      toast('Password changed', 'success');
      setCurrentPw(''); setNewPw(''); setConfirmPw('');
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
          <h2 className="modal-title" style={{ margin: 0 }}>My Profile</h2>
          <button className="btn-icon" onClick={onClose}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>

        {/* Avatar */}
        <div className="flex items-center gap-3" style={{ gap: 16, marginBottom: 20 }}>
          <div style={{ position: 'relative' }}>
            <Avatar user={user} size="xl" />
            {!user?.is_default_admin && (
              <label title="Change avatar" style={{
                position: 'absolute', bottom: 0, right: 0,
                background: 'var(--primary)', color: 'white', borderRadius: '50%',
                width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer', fontSize: 12
              }}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                <input type="file" accept="image/*"
                  style={{ opacity: 0, position: 'absolute', width: '100%', height: '100%', top: 0, left: 0, cursor: 'pointer' }}
                  onChange={handleAvatarUpload} />
              </label>
            )}
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 16 }}>{user?.display_name || user?.name}</div>
            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>{user?.email}</div>
            <span className={`role-badge role-${user?.role}`}>{user?.role}</span>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-2" style={{ marginBottom: 20 }}>
          <button className={`btn btn-sm ${tab === 'profile' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('profile')}>Profile</button>
          <button className={`btn btn-sm ${tab === 'password' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab('password')}>Change Password</button>
          <button className={`btn btn-sm ${tab === 'notifications' ? 'btn-primary' : 'btn-secondary'}`} onClick={() => { setTab('notifications'); setPushResult(null); }}>Notifications</button>
        </div>

        {tab === 'profile' && (
          <div className="flex-col gap-3">
            <div className="flex-col gap-1">
              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Display Name</label>
              <div className="flex gap-2">
                <input
                  className="input flex-1"
                  value={displayName}
                  onChange={async e => {
                    const val = e.target.value;
                    setDisplayName(val);
                    setDisplayNameWarning('');
                    if (val && val !== user?.display_name) {
                      try {
                        const { taken } = await api.checkDisplayName(val);
                        if (taken) setDisplayNameWarning('Display name is already in use');
                      } catch {}
                    }
                  }}
                  placeholder={user?.name}
                  autoComplete="new-password" autoCorrect="off" autoCapitalize="words" spellCheck={false}
                  style={{ borderColor: displayNameWarning ? '#e53935' : undefined }} />
                {displayName !== savedDisplayName ? null : savedDisplayName ? (
                  <button
                    className="btn btn-sm"
                    style={{ background: 'var(--surface-variant)', color: 'var(--text-secondary)', flexShrink: 0 }}
                    onClick={() => setDisplayName('')}
                    type="button"
                  >
                    Remove
                  </button>
                ) : null}
              </div>
              {displayNameWarning && <span className="text-xs" style={{ color: '#e53935' }}>{displayNameWarning}</span>}
              {savedDisplayName && <span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>Username: {user?.name}</span>}
            </div>
            <div className="flex-col gap-1">
              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>About Me</label>
              <textarea className="input" value={aboutMe} onChange={e => setAboutMe(e.target.value)} placeholder="Tell your team about yourself..." rows={3} autoComplete="new-password" autoCorrect="off" spellCheck={false} style={{ resize: 'vertical' }} />
            </div>
            {user?.role === 'admin' && (
              <label className="flex items-center gap-2 text-sm pointer" style={{ color: 'var(--text-secondary)', userSelect: 'none' }}>
                <input
                  type="checkbox"
                  checked={hideAdminTag}
                  onChange={e => setHideAdminTag(e.target.checked)}
                  style={{ accentColor: 'var(--primary)', width: 16, height: 16 }} />
                Hide "Admin" tag next to my name in messages
              </label>
            )}
            <label className="flex items-center gap-2 text-sm pointer" style={{ color: 'var(--text-secondary)', userSelect: 'none' }}>
              <input
                type="checkbox"
                checked={allowDm}
                onChange={e => setAllowDm(e.target.checked)}
                style={{ accentColor: 'var(--primary)', width: 16, height: 16 }} />
              Allow others to send me direct messages
            </label>
            <button className="btn btn-primary" onClick={handleSaveProfile} disabled={loading}>
              {loading ? 'Saving...' : 'Save Changes'}
            </button>
          </div>
        )}

        {tab === 'notifications' && (
          <div className="flex-col gap-3">
            <div style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              <p style={{ margin: '0 0 8px' }}>Tap <strong>Send Test Notification</strong> to trigger a push to this device. The notification will arrive shortly if everything is configured correctly.</p>
              <p style={{ margin: 0 }}>If it doesn't arrive, check:<br/>
                • Notification permission granted (browser prompt)<br/>
                • Android Settings → Apps → RosterChirp → Notifications → Enabled<br/>
                • App is backgrounded when the test fires
              </p>
            </div>
            <button
              className="btn btn-primary"
              disabled={pushTesting}
              onClick={async () => {
                setPushTesting(true);
                setPushResult(null);
                try {
                  const { results } = await api.testPush();
                  setPushResult({ ok: true, results });
                } catch (e) {
                  setPushResult({ ok: false, error: e.message });
                } finally {
                  setPushTesting(false);
                }
              }}
            >
              {pushTesting ? 'Sending…' : 'Send Test Notification'}
            </button>
            {pushResult && (
              <div style={{
                padding: '10px 12px',
                borderRadius: 8,
                background: pushResult.ok ? 'var(--surface-variant)' : '#fdecea',
                color: pushResult.ok ? 'var(--text-primary)' : '#c62828',
                fontSize: 13,
              }}>
                {pushResult.ok ? (
                  pushResult.results.map((r, i) => (
                    <div key={i}>
                      <strong>{r.device}</strong>: {r.status === 'sent' ? '✓ Sent — check your device for the notification' : `✗ Failed — ${r.error}`}
                    </div>
                  ))
                ) : (
                  <div>✗ {pushResult.error}</div>
                )}
              </div>
            )}
          </div>
        )}

        {tab === 'password' && (
          <div className="flex-col gap-3">
            <div className="flex-col gap-1">
              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Current Password</label>
              <input className="input" type="password" value={currentPw} onChange={e => setCurrentPw(e.target.value)} autoComplete="new-password" />
            </div>
            <div className="flex-col gap-1">
              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>New Password</label>
              <input className="input" type="password" value={newPw} onChange={e => setNewPw(e.target.value)} autoComplete="new-password" />
            </div>
            <div className="flex-col gap-1">
              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Confirm New Password</label>
              <input className="input" type="password" value={confirmPw} onChange={e => setConfirmPw(e.target.value)} autoComplete="new-password" />
            </div>
            <button className="btn btn-primary" onClick={handleChangePassword} disabled={loading || !currentPw || !newPw}>
              {loading ? 'Changing...' : 'Change Password'}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}