import { useAuthStore } from '@/stores/authStore';
import { useUIStore } from '@/stores/uiStore';
import { useState } from 'react';
import { Avatar } from '@/components/common';
import { ChevronRight, User, Lock, Building2, Receipt, Bell, Info, Shield, FileText } from 'lucide-react';

interface SettingSection {
  title: string;
  items: { icon: React.ElementType; label: string; action?: () => void; toggle?: boolean; value?: boolean }[];
}

export default function SettingsScreen() {
  const { user } = useAuthStore();
  const { goBack } = useUIStore();
  const [toggles, setToggles] = useState({ feeReminders: true, birthdayAlerts: true, lowStockAlerts: true });

  const sections: SettingSection[] = [
    {
      title: 'Account',
      items: [
        { icon: User, label: 'Edit Profile' },
        { icon: Lock, label: 'Change Password' },
      ],
    },
    {
      title: 'Academy',
      items: [
        { icon: Building2, label: 'Academy Information' },
        { icon: Receipt, label: 'Fee Configuration' },
      ],
    },
    {
      title: 'Notifications',
      items: [
        { icon: Bell, label: 'Fee Due Reminders', toggle: true, value: toggles.feeReminders },
        { icon: Bell, label: 'Birthday Alerts', toggle: true, value: toggles.birthdayAlerts },
        { icon: Bell, label: 'Low Stock Alerts', toggle: true, value: toggles.lowStockAlerts },
      ],
    },
    {
      title: 'App',
      items: [
        { icon: Info, label: 'About (v1.0.0)' },
        { icon: Shield, label: 'Privacy Policy' },
        { icon: FileText, label: 'Terms of Service' },
      ],
    },
  ];

  return (
    <div className="px-4 pt-4 pb-4 space-y-6">
      {/* Profile */}
      {user && (
        <div className="bg-white rounded-2xl p-5 card-shadow flex items-center gap-4">
          <Avatar name={user.name} size="lg" />
          <div>
            <h3 className="text-base font-bold text-gray-900">{user.name}</h3>
            <p className="text-xs text-gray-400 capitalize">{user.role} Account</p>
            <p className="text-xs text-gray-400">{user.username}</p>
          </div>
        </div>
      )}

      {/* Sections */}
      {sections.map((section, si) => (
        <div key={si}>
          <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-1">{section.title}</h4>
          <div className="bg-white rounded-2xl card-shadow divide-y divide-gray-50">
            {section.items.map((item, ii) => {
              const Icon = item.icon;
              return (
                <button key={ii} className="w-full flex items-center gap-3 px-4 py-3.5 text-left active:bg-gray-50 transition-colors">
                  <Icon className="w-4 h-4 text-gray-400 flex-shrink-0" />
                  <span className="flex-1 text-sm text-gray-700">{item.label}</span>
                  {item.toggle ? (
                    <div className={`w-11 h-6 rounded-full p-0.5 transition-all ${item.value ? 'bg-orange-500' : 'bg-gray-300'}`}>
                      <div className={`w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${item.value ? 'translate-x-5' : 'translate-x-0'}`} />
                    </div>
                  ) : (
                    <ChevronRight className="w-4 h-4 text-gray-300" />
                  )}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}
