'use client';

/**
 * Portal Settings page — accessible to Client_Portal users.
 *
 * Provides:
 * - Account section: user info display
 * - Theme section: accent color picker with presets
 */

import { useAuthStore } from '@/lib/stores/auth-store';
import { useThemeStore, ACCENT_PRESETS } from '@/lib/stores/theme-store';
import { useTranslation } from '@/lib/hooks/useTranslation';

export default function PortalSettingsPage() {
  const user = useAuthStore((s) => s.user);
  const role = useAuthStore((s) => s.role);
  const { accent, setAccent } = useThemeStore();
  const t = useTranslation();

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold text-divisi-text-primary">
        {t.sidebar.settings}
      </h1>

      {/* Account Section */}
      <section className="rounded-xl border border-divisi-border bg-divisi-card p-6 space-y-4">
        <h2 className="text-lg font-semibold text-divisi-text-primary">Account</h2>
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label className="text-xs font-medium text-divisi-text-secondary uppercase tracking-wider">Name</label>
            <p className="mt-1 text-sm text-divisi-text-primary">{user?.name ?? 'N/A'}</p>
          </div>
          <div>
            <label className="text-xs font-medium text-divisi-text-secondary uppercase tracking-wider">Role</label>
            <p className="mt-1 text-sm text-divisi-text-primary">{role?.replace(/_/g, ' ') ?? 'N/A'}</p>
          </div>
          {user?.clientId && (
            <div>
              <label className="text-xs font-medium text-divisi-text-secondary uppercase tracking-wider">Client ID</label>
              <p className="mt-1 text-sm text-divisi-text-primary">{user.clientId}</p>
            </div>
          )}
        </div>
      </section>

      {/* Theme Section */}
      <section className="rounded-xl border border-divisi-border bg-divisi-card p-6">
        <h2 className="text-lg font-semibold text-divisi-text-primary mb-4">Theme</h2>
        <p className="text-sm text-divisi-text-secondary mb-4">Customize the accent color.</p>
        <div className="grid grid-cols-4 gap-3">
          {ACCENT_PRESETS.map((preset) => {
            const isSelected = accent.name === preset.name;
            return (
              <button
                key={preset.name}
                type="button"
                onClick={() => setAccent(preset)}
                className={`
                  flex flex-col items-center gap-2 rounded-xl p-4 border-2 transition-all duration-150
                  ${isSelected
                    ? 'border-divisi-accent bg-divisi-accent/10'
                    : 'border-divisi-border hover:border-divisi-text-secondary/30'
                  }
                `}
              >
                <div
                  className={`h-8 w-8 rounded-full ring-2 ring-offset-2 ring-offset-divisi-card ${isSelected ? 'ring-current' : 'ring-transparent'}`}
                  style={{ backgroundColor: preset.value, color: preset.value }}
                />
                <span className={`text-xs font-medium ${isSelected ? 'text-divisi-accent' : 'text-divisi-text-secondary'}`}>
                  {preset.name}
                </span>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}