/* eslint-disable */
// Settings — appearance toggle, countdown editor, account, admin panel, danger zone

const SettingsScreen = ({ dark, onToggleDark, onLogout, user }) => {
  const settings = Storage.get('familyhub_settings') || {};
  const [countdownLabel, setCountdownLabel] = React.useState(settings.countdownLabel || "Next Family Vacation");
  const [countdownDate, setCountdownDate] = React.useState(settings.countdownDate || "2026-06-26");

  const saveCountdown = () => {
    const s = Storage.get('familyhub_settings') || {};
    Storage.set('familyhub_settings', { ...s, countdownLabel, countdownDate });
  };

  const handleExport = () => {
    const data = Storage.exportData();
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = 'familyhub-export.json'; a.click();
    URL.revokeObjectURL(url);
  };

  const handleImport = () => {
    const input = document.createElement('input'); input.type = 'file'; input.accept = '.json';
    input.onchange = (e) => {
      const file = e.target.files[0]; if (!file) return;
      const reader = new FileReader();
      reader.onload = (ev) => { try { Storage.importData(JSON.parse(ev.target.result)); alert('Data imported!'); } catch(err) { alert('Invalid file'); } };
      reader.readAsText(file);
    };
    input.click();
  };

  const [showClearConfirm, setShowClearConfirm] = React.useState(false);

  const handleClearAll = () => { Storage.clearAll(); onLogout(); };

  const db = window._db;
  const [users, setUsers] = React.useState([]);
  const [usersLoading, setUsersLoading] = React.useState(true);

  const fetchUsers = async () => {
    if (!db) { setUsersLoading(false); return; }
    try {
      const snapshot = await db.collection('users').orderBy('createdAt', 'desc').get();
      setUsers(snapshot.docs.map(doc => ({ uid: doc.id, ...doc.data() })));
    } catch (e) { console.error('Failed to fetch users:', e); }
    setUsersLoading(false);
  };

  React.useEffect(() => { fetchUsers(); }, []);

  const updateUserStatus = async (uid, status) => {
    if (!db) return;
    try {
      await db.collection('users').doc(uid).update({ status });
      await fetchUsers();
    } catch (e) {
      console.error('Failed to update user status:', e);
    }
  };

  const toggleAdmin = async (uid, currentRole) => {
    if (!db) return;
    const newRole = currentRole === 'admin' ? 'member' : 'admin';
    try {
      await db.collection('users').doc(uid).update({ role: newRole });
      await fetchUsers();
    } catch (e) {
      console.error('Failed to update user role:', e);
    }
  };

  const userEmail = user?.email || '';
  const userProvider = user?.providerData?.[0]?.providerId || 'Google';
  const providerLabel = userProvider.includes('google') ? 'Google' : userProvider.includes('microsoft') ? 'Microsoft' : userProvider.includes('password') ? 'Email' : userProvider;
  const currentUserRole = users.find(u => u.uid === user?.uid)?.role || 'member';
  const isAdmin = currentUserRole === 'admin';

  return (
  <section className="p-4 md:p-6 max-w-2xl">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">Settings</h2>
    <div className="space-y-6">

      {/* Appearance */}
      <Card>
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Appearance</h3>
        <div className="flex justify-between items-center">
          <span className="text-gray-600 dark:text-gray-300">Dark Mode</span>
          <button
            onClick={onToggleDark}
            className={
              "w-11 h-6 rounded-full p-0.5 transition-colors " +
              (dark ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-600")
            }
            aria-label="Toggle dark mode"
          >
            <span
              className={
                "block w-5 h-5 bg-white rounded-full shadow transition-transform " +
                (dark ? "translate-x-5" : "translate-x-0")
              }
            ></span>
          </button>
        </div>
      </Card>

      {/* Countdown editor */}
      <Card>
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Countdown Timer</h3>
        <div className="space-y-4">
          <div>
            <Label>Event Name</Label>
            <Input value={countdownLabel} onChange={(e) => setCountdownLabel(e.target.value)} />
          </div>
          <div>
            <Label>Event Date</Label>
            <Input type="date" value={countdownDate} onChange={(e) => setCountdownDate(e.target.value)} />
          </div>
          <BtnPrimary className="w-full" onClick={saveCountdown}>Save Countdown</BtnPrimary>
        </div>
      </Card>

      {/* Account */}
      <Card>
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Account</h3>
        <div className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
          <p><b>Signed in as</b> {userEmail}</p>
          <p><b>Display name</b> {user?.displayName || 'Admin'}</p>
          <p><b>Sign-in method</b> {providerLabel}</p>
          <p><b>Role</b> <span className={isAdmin ? "text-purple-600 dark:text-purple-400 font-semibold" : "text-gray-600 dark:text-gray-300 font-semibold"}>{isAdmin ? 'Admin' : 'Member'}</span></p>
        </div>
      </Card>

      {/* Admin panel */}
      <Card>
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-bold text-gray-900 dark:text-white">User Management</h3>
          <div className="flex gap-2 text-xs">
            <span className="px-2 py-1 rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 font-medium">{users.filter(u => u.status === 'pending').length} pending</span>
            <span className="px-2 py-1 rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 font-medium">{users.length} total</span>
          </div>
        </div>
        <div className="rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
          {usersLoading && <p className="p-4 text-sm text-gray-500 dark:text-gray-400 text-center">Loading users...</p>}
          {!usersLoading && users.length === 0 && <p className="p-4 text-sm text-gray-500 dark:text-gray-400 text-center">No registered users yet.</p>}
          {users.map((u) => {
            const isYou = u.uid === user?.uid;
            const provLabel = ({ 'google.com': 'Google', 'microsoft.com': 'Microsoft', 'password': 'Email' })[u.provider] || u.provider || 'Google';
            return (
            <div key={u.uid} className="p-3 flex items-start justify-between gap-3">
              <div className="min-w-0">
                <p className="font-medium text-gray-900 dark:text-white text-sm truncate">{u.displayName || u.email}{isYou ? ' (You)' : ''}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{u.email}</p>
                <div className="flex gap-1.5 mt-1.5">
                  <Pill tone={u.status === "approved" ? "success" : u.status === "pending" ? "warn" : "danger"}>
                    {u.status[0].toUpperCase() + u.status.slice(1)}
                  </Pill>
                  <span className="text-xs text-gray-400 dark:text-gray-500 self-center">{provLabel}</span>
                  {u.role === 'admin' && <Pill tone="purple">Admin</Pill>}
                </div>
              </div>
              <div className="flex flex-col gap-1 shrink-0">
                {isYou ? (
                  <span className="text-xs text-gray-400">—</span>
                ) : (
                  <React.Fragment>
                    {u.status === "pending" ? (
                      <React.Fragment>
                        <button onClick={() => updateUserStatus(u.uid, 'approved')} className="text-xs px-2 py-1 bg-green-600 hover:bg-green-700 text-white rounded">Approve</button>
                        <button onClick={() => updateUserStatus(u.uid, 'rejected')} className="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded">Reject</button>
                      </React.Fragment>
                    ) : u.status === "approved" ? (
                      <button onClick={() => updateUserStatus(u.uid, 'rejected')} className="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 text-white rounded">Revoke</button>
                    ) : (
                      <button onClick={() => updateUserStatus(u.uid, 'approved')} className="text-xs px-2 py-1 bg-green-600 hover:bg-green-700 text-white rounded">Approve</button>
                    )}
                    <button
                      onClick={() => toggleAdmin(u.uid, u.role)}
                      className={"text-xs px-2 py-1 rounded " + (u.role === 'admin'
                        ? "bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800"
                        : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600")}
                    >
                      {u.role === 'admin' ? 'Revoke Admin' : 'Make Admin'}
                    </button>
                  </React.Fragment>
                )}
              </div>
            </div>
            );
          })}
        </div>
      </Card>

      {/* Data Management */}
      <Card>
        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">Data Management</h3>
        <div className="space-y-3">
          <BtnSecondary className="w-full" onClick={handleExport}>Export Data as JSON</BtnSecondary>
          <BtnSecondary className="w-full" onClick={handleImport}>Import Data from JSON</BtnSecondary>
        </div>
      </Card>

      {/* Danger Zone */}
      <Card className="!border-2 !border-red-300 dark:!border-red-800 !bg-red-50 dark:!bg-red-900/20">
        <h3 className="text-lg font-bold text-red-600 dark:text-red-400 mb-4">⚠️ Danger Zone</h3>
        {!isAdmin ? (
          <div className="flex items-start gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 rounded-lg">
            <span className="text-yellow-600 dark:text-yellow-400 text-lg leading-none mt-0.5">🔒</span>
            <p className="text-sm text-yellow-800 dark:text-yellow-200">
              Only administrators can clear all data. Contact an admin if you need this action performed.
            </p>
          </div>
        ) : !showClearConfirm ? (
          <React.Fragment>
            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
              This will permanently delete <strong>all family data</strong> from every device. This action cannot be undone.
            </p>
            <button
              onClick={() => setShowClearConfirm(true)}
              className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors duration-200 w-full"
            >
              Clear All Data
            </button>
          </React.Fragment>
        ) : (
          <div className="space-y-4">
            <div className="p-4 bg-red-100 dark:bg-red-900/40 border border-red-300 dark:border-red-700 rounded-lg">
              <p className="text-sm font-semibold text-red-700 dark:text-red-300 mb-1">Are you absolutely sure?</p>
              <p className="text-sm text-red-600 dark:text-red-400">
                This will permanently erase all tasks, budgets, memories, meals, registry items, and settings for every family member. There is no way to recover this data.
              </p>
            </div>
            <div className="flex gap-3">
              <button
                onClick={() => setShowClearConfirm(false)}
                className="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-medium text-sm transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleClearAll}
                className="flex-1 px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white font-semibold text-sm transition-colors"
              >
                Yes, delete everything
              </button>
            </div>
          </div>
        )}
      </Card>
    </div>
  </section>
  );
};

window.SettingsScreen = SettingsScreen;