frontend/app/dashboard/settings/page.tsx

'use client';

import { useState } from 'react';
import { Settings, User, Bell, Shield, Palette, Brain, Trash2, Download, LogOut, ChevronRight, Moon, Sun, Volume2, VolumeX } from 'lucide-react';

const settingSections = [
  {
    title: 'Account',
    icon: User,
    items: [
      { label: 'Profile Information', description: 'Update your name and email' },
      { label: 'Password', description: 'Change your password' },
      { label: 'Connected Accounts', description: 'Manage social logins' },
    ],
  },
  {
    title: 'Notifications',
    icon: Bell,
    items: [
      { label: 'Email Notifications', description: 'Weekly digest and updates', toggle: true, enabled: true },
      { label: 'Prayer Reminders', description: 'Daily prayer time reminders', toggle: true, enabled: true },
      { label: 'Study Reminders', description: 'Bible study notifications', toggle: true, enabled: false },
    ],
  },
  {
    title: 'Privacy',
    icon: Shield,
    items: [
      { label: 'Data Collection', description: 'How we use your information' },
      { label: 'Memory Settings', description: 'Control what ORA remembers', toggle: true, enabled: true },
      { label: 'Share Analytics', description: 'Help improve ORA', toggle: true, enabled: true },
    ],
  },
];

export default function SettingsPage() {
  const [theme, setTheme] = useState<'dark' | 'light' | 'system'>('dark');
  const [soundEnabled, setSoundEnabled] = useState(true);
  const [toggleStates, setToggleStates] = useState<Record<string, boolean>>({
    'Email Notifications': true,
    'Prayer Reminders': true,
    'Study Reminders': false,
    'Memory Settings': true,
    'Share Analytics': true,
  });

  const handleToggle = (label: string) => {
    setToggleStates((prev) => ({ ...prev, [label]: !prev[label] }));
  };

  return (
    <div className="flex-1 overflow-y-auto">
      {/* Header */}
      <div className="sticky top-0 z-10 bg-[#0a0a0a]/90 backdrop-blur-xl border-b border-white/5">
        <div className="max-w-3xl mx-auto px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-neutral-500/10 border border-neutral-500/30 flex items-center justify-center">
              <Settings className="w-5 h-5 text-neutral-400" />
            </div>
            <div>
              <h1 className="text-xl font-semibold text-white">Settings</h1>
              <p className="text-sm text-neutral-500">Customize your ORA experience</p>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-3xl mx-auto px-6 py-8">
        {/* Appearance */}
        <div className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <Palette className="w-5 h-5 text-purple-400" />
            <h2 className="text-lg font-semibold text-white">Appearance</h2>
          </div>
          <div className="p-4 rounded-xl bg-white/[0.02] border border-white/10">
            <div className="flex items-center justify-between mb-4">
              <div>
                <span className="text-white font-medium">Theme</span>
                <p className="text-neutral-500 text-sm">Choose your preferred theme</p>
              </div>
              <div className="flex gap-1 p-1 rounded-lg bg-white/5">
                {[
                  { value: 'dark', icon: Moon, label: 'Dark' },
                  { value: 'light', icon: Sun, label: 'Light' },
                ].map((option) => (
                  <button
                    key={option.value}
                    onClick={() => setTheme(option.value as 'dark' | 'light')}
                    className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors ${
                      theme === option.value
                        ? 'bg-purple-500/20 text-purple-400'
                        : 'text-neutral-400 hover:text-white'
                    }`}
                  >
                    <option.icon className="w-4 h-4" />
                    {option.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="flex items-center justify-between pt-4 border-t border-white/5">
              <div>
                <span className="text-white font-medium">Sound Effects</span>
                <p className="text-neutral-500 text-sm">Play sounds for notifications</p>
              </div>
              <button
                onClick={() => setSoundEnabled(!soundEnabled)}
                className={`p-2 rounded-lg transition-colors ${
                  soundEnabled
                    ? 'bg-purple-500/20 text-purple-400'
                    : 'bg-white/5 text-neutral-500'
                }`}
              >
                {soundEnabled ? <Volume2 className="w-5 h-5" /> : <VolumeX className="w-5 h-5" />}
              </button>
            </div>
          </div>
        </div>

        {/* AI Settings */}
        <div className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <Brain className="w-5 h-5 text-violet-400" />
            <h2 className="text-lg font-semibold text-white">AI Settings</h2>
          </div>
          <div className="p-4 rounded-xl bg-white/[0.02] border border-white/10 space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <span className="text-white font-medium">Show Reasoning</span>
                <p className="text-neutral-500 text-sm">Display ORA's thought process</p>
              </div>
              <button
                className="w-12 h-6 rounded-full bg-purple-500/20 border border-purple-500/30 relative"
              >
                <div className="absolute right-0.5 top-0.5 w-5 h-5 rounded-full bg-purple-400" />
              </button>
            </div>
            <div className="flex items-center justify-between pt-4 border-t border-white/5">
              <div>
                <span className="text-white font-medium">Preferred Bible Version</span>
                <p className="text-neutral-500 text-sm">Default translation for verses</p>
              </div>
              <select className="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:border-purple-500/50">
                <option value="esv">ESV</option>
                <option value="niv">NIV</option>
                <option value="kjv">KJV</option>
                <option value="nasb">NASB</option>
                <option value="nlt">NLT</option>
              </select>
            </div>
          </div>
        </div>

        {/* Setting Sections */}
        {settingSections.map((section) => (
          <div key={section.title} className="mb-8">
            <div className="flex items-center gap-2 mb-4">
              <section.icon className="w-5 h-5 text-neutral-400" />
              <h2 className="text-lg font-semibold text-white">{section.title}</h2>
            </div>
            <div className="rounded-xl bg-white/[0.02] border border-white/10 divide-y divide-white/5">
              {section.items.map((item) => (
                <div
                  key={item.label}
                  className="p-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors"
                >
                  <div>
                    <span className="text-white font-medium">{item.label}</span>
                    <p className="text-neutral-500 text-sm">{item.description}</p>
                  </div>
                  {item.toggle ? (
                    <button
                      onClick={() => handleToggle(item.label)}
                      className={`w-12 h-6 rounded-full relative transition-colors ${
                        toggleStates[item.label]
                          ? 'bg-purple-500/20 border border-purple-500/30'
                          : 'bg-white/5 border border-white/10'
                      }`}
                    >
                      <div
                        className={`absolute top-0.5 w-5 h-5 rounded-full transition-all ${
                          toggleStates[item.label]
                            ? 'right-0.5 bg-purple-400'
                            : 'left-0.5 bg-neutral-500'
                        }`}
                      />
                    </button>
                  ) : (
                    <ChevronRight className="w-5 h-5 text-neutral-500" />
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}

        {/* Data Management */}
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-white mb-4">Data Management</h2>
          <div className="space-y-3">
            <button className="w-full p-4 rounded-xl bg-white/[0.02] border border-white/10 hover:border-blue-500/30 transition-all flex items-center justify-between group">
              <div className="flex items-center gap-3">
                <Download className="w-5 h-5 text-blue-400" />
                <div className="text-left">
                  <span className="text-white font-medium">Export My Data</span>
                  <p className="text-neutral-500 text-sm">Download all your ORA data</p>
                </div>
              </div>
              <ChevronRight className="w-5 h-5 text-neutral-500 group-hover:text-blue-400 transition-colors" />
            </button>
            <button className="w-full p-4 rounded-xl bg-white/[0.02] border border-rose-500/20 hover:border-rose-500/30 transition-all flex items-center justify-between group">
              <div className="flex items-center gap-3">
                <Trash2 className="w-5 h-5 text-rose-400" />
                <div className="text-left">
                  <span className="text-white font-medium">Delete All Data</span>
                  <p className="text-neutral-500 text-sm">Permanently remove all your data</p>
                </div>
              </div>
              <ChevronRight className="w-5 h-5 text-neutral-500 group-hover:text-rose-400 transition-colors" />
            </button>
          </div>
        </div>

        {/* Sign Out */}
        <button className="w-full p-4 rounded-xl bg-white/[0.02] border border-white/10 hover:bg-white/[0.04] transition-all flex items-center justify-center gap-2 text-neutral-400 hover:text-white">
          <LogOut className="w-5 h-5" />
          <span className="font-medium">Sign Out</span>
        </button>

        {/* Version */}
        <p className="text-center text-neutral-600 text-sm mt-8">
          ORA v1.0.0 • Made with faith
        </p>
      </div>
    </div>
  );
}