/**
 * User settings page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import React, { useState } from 'react';
import type { JSX } from 'react';
import { useAuth } from '../contexts/AuthContext';

export default function SettingsPage(): JSX.Element {
  const { user } = useAuth();
  const [activeTab, setActiveTab] = useState<string>('general');

  const tabs = [
    { id: 'general', label: 'General' },
{% if password_reset %}
    { id: 'password', label: 'Password' },
{% endif %}
{% if mfa_enabled %}
    { id: 'mfa', label: 'Two-Factor Auth' },
{% endif %}
{% if email_verification %}
    { id: 'email', label: 'Email Verification' },
{% endif %}
  ];

  return (
    <div className="page-container">
      <header className="page-header">
        <h1 className="page-title">Settings</h1>
        <p className="page-subtitle">Manage your account settings</p>
      </header>

      <div className="flex gap-6">
        {/* Sidebar tabs */}
        <nav className="w-48 flex-shrink-0 space-y-1">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`w-full text-left px-3 py-2 rounded-nordic text-sm font-medium transition-colors ${
                activeTab === tab.id
                  ? 'bg-nordic-100 text-nordic-900'
                  : 'text-muted hover:bg-surface-sunken hover:text-foreground'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>

        {/* Content */}
        <div className="flex-1 card p-6">
          {activeTab === 'general' && (
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-foreground">General Settings</h2>
              <div className="space-y-3">
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1">
                    {{ username_field | capitalize }}
                  </label>
                  <input
                    type="text"
                    defaultValue={(user as { {{ username_field }}?: string } | null)?.{{ username_field }} || ''}
                    className="input-field"
                    readOnly
                  />
                  <p className="text-xs text-muted mt-1">Contact support to change your {{ username_field }}.</p>
                </div>
              </div>
            </div>
          )}
{% if password_reset %}

          {activeTab === 'password' && (
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-foreground">Change Password</h2>
              <form className="space-y-3" onSubmit={(e) => e.preventDefault()}>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1">
                    Current password
                  </label>
                  <input type="password" className="input-field" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1">
                    New password
                  </label>
                  <input type="password" className="input-field" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1">
                    Confirm new password
                  </label>
                  <input type="password" className="input-field" />
                </div>
                <button type="submit" className="btn-primary">
                  Update password
                </button>
              </form>
            </div>
          )}
{% endif %}
{% if mfa_enabled %}

          {activeTab === 'mfa' && (
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-foreground">Two-Factor Authentication</h2>
              <p className="text-sm text-muted">
                Add an extra layer of security to your account using TOTP-based authentication.
              </p>
              <button className="btn-secondary">
                Set up two-factor authentication
              </button>
            </div>
          )}
{% endif %}
{% if email_verification %}

          {activeTab === 'email' && (
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-foreground">Email Verification</h2>
              <p className="text-sm text-muted">
                Manage your email verification status.
              </p>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-green-500 rounded-full" />
                <span className="text-sm text-foreground">Email verified</span>
              </div>
            </div>
          )}
{% endif %}
        </div>
      </div>
    </div>
  );
}
