import { useEffect, useState } from 'react';
import { useAuth } from '../auth/AuthContext';
import { apiAdmin, type EmailDomainItem } from '../api';

export function ChangePasswordPage({ forced }: { forced?: boolean }) {
  const { changePassword, logout } = useAuth();
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    if (newPassword.length < 8) {
      setError('Mật khẩu mới tối thiểu 8 ký tự');
      return;
    }
    if (newPassword !== confirm) {
      setError('Xác nhận mật khẩu không khớp');
      return;
    }
    setBusy(true);
    try {
      await changePassword(oldPassword, newPassword);
    } catch (err: any) {
      setError(err?.message || 'Đổi mật khẩu thất bại');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login-screen">
      <div className="login-card">
        <h1 className="login-heading">{forced ? 'Đổi mật khẩu bắt buộc' : 'Đổi mật khẩu'}</h1>
        {forced && <p className="login-hint">Lần đăng nhập đầu tiên — vui lòng đặt mật khẩu mới trước khi tiếp tục.</p>}
        <form onSubmit={submit} className="login-form">
          <label className="login-field">
            <span>Mật khẩu hiện tại</span>
            <input type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} required />
          </label>
          <label className="login-field">
            <span>Mật khẩu mới</span>
            <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required minLength={8} />
          </label>
          <label className="login-field">
            <span>Xác nhận mật khẩu mới</span>
            <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required minLength={8} />
          </label>
          {error && <div className="login-error">{error}</div>}
          <button type="submit" className="btn btn-primary login-submit" disabled={busy}>
            {busy ? 'Đang lưu...' : 'Lưu mật khẩu'}
          </button>
          {!forced && (
            <button type="button" className="link-btn" style={{ marginTop: '0.5rem' }} onClick={logout}>
              Đăng xuất
            </button>
          )}
        </form>
      </div>
    </div>
  );
}

export function EmailDomainsTab() {
  const [domains, setDomains] = useState<EmailDomainItem[]>([]);
  const [newDomain, setNewDomain] = useState('');

  const load = async () => {
    const res = await apiAdmin.listEmailDomains();
    setDomains(res.data);
  };

  useEffect(() => {
    load().catch(console.error);
  }, []);

  const addDomain = async () => {
    if (!newDomain.trim()) return;
    await apiAdmin.addEmailDomain(newDomain.trim());
    setNewDomain('');
    await load();
  };

  const removeDomain = async (id: number) => {
    if (!confirm('Xóa đuôi email này?')) return;
    await apiAdmin.deleteEmailDomain(id);
    await load();
  };

  return (
    <div className="page-stack">
      <header className="page-header">
        <h1 className="page-title">Đuôi email</h1>
        <p className="page-desc">Cấu hình đuôi email được phép đăng ký và đăng nhập.</p>
      </header>

      <div className="card" style={{ padding: '1.25rem' }}>
        <h2 className="section-title">Đuôi email được phép</h2>
        <p className="page-desc" style={{ marginTop: 0 }}>
          Nếu chưa có bản ghi nào, hệ thống chấp nhận mọi đuôi email. Thêm đuôi để giới hạn truy cập.
        </p>
        <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
          <input
            placeholder="vd: rikkeiacademy.com"
            value={newDomain}
            onChange={(e) => setNewDomain(e.target.value)}
            style={{ flex: 1 }}
          />
          <button type="button" className="btn btn-primary" onClick={addDomain}>Thêm</button>
        </div>
        <ul className="domain-list">
          {domains.length === 0 && <li className="domain-empty">Chưa cấu hình — chấp nhận tất cả đuôi email</li>}
          {domains.map((d) => (
            <li key={d.id} className="domain-item">
              <span>@{d.domain}</span>
              <button type="button" className="btn btn-ghost btn-sm" onClick={() => removeDomain(d.id)}>Xóa</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export function MyAccountTab() {
  const { staff, changePassword } = useAuth();
  const [oldPw, setOldPw] = useState('');
  const [newPw, setNewPw] = useState('');
  const [msg, setMsg] = useState('');
  const [err, setErr] = useState('');

  const submitPw = async (e: React.FormEvent) => {
    e.preventDefault();
    setErr('');
    setMsg('');
    try {
      await changePassword(oldPw, newPw);
      setMsg('Đã đổi mật khẩu');
      setOldPw('');
      setNewPw('');
    } catch (e: any) {
      setErr(e?.message || 'Lỗi');
    }
  };

  const displayName = staff?.fullName?.trim() || staff?.email?.split('@')[0] || 'Tài khoản';

  return (
    <div className="page-stack">
      <header className="page-header">
        <h1 className="page-title">Tài khoản của tôi</h1>
        <p className="page-desc">Thông tin đăng nhập và bảo mật cá nhân.</p>
      </header>

      <div className="card" style={{ padding: '1.25rem' }}>
        <h2 className="section-title">Thông tin</h2>
        <p style={{ margin: '0 0 0.25rem', fontWeight: 600 }}>{displayName}</p>
        <p style={{ margin: 0, color: 'var(--text-muted)' }}>{staff?.email}</p>
      </div>

      <div className="card" style={{ padding: '1.25rem' }}>
        <h2 className="section-title">Đổi mật khẩu</h2>
        <form onSubmit={submitPw} className="login-form" style={{ maxWidth: 400 }}>
          <label className="login-field">
            <span>Mật khẩu hiện tại</span>
            <input type="password" value={oldPw} onChange={(e) => setOldPw(e.target.value)} required />
          </label>
          <label className="login-field">
            <span>Mật khẩu mới</span>
            <input type="password" value={newPw} onChange={(e) => setNewPw(e.target.value)} required minLength={8} />
          </label>
          {err && <div className="login-error">{err}</div>}
          {msg && <div className="login-success">{msg}</div>}
          <button type="submit" className="btn btn-primary">Lưu</button>
        </form>
      </div>
    </div>
  );
}
