import { Bell, HelpCircle, ChevronDown, ChevronRight, User, Lock, CreditCard, Palette, Globe, Mail, XCircle, Home as HomeIcon, Settings as SettingsIcon } from 'lucide-react';
import BreadCrumb from '../../components/BreadCrumb';

export default function Settings({ user }) {
  const settingsGroups = [
    {
      title: 'Account Settings',
      items: [
        { icon: User, label: 'Profile Information', description: 'Update your personal details', color: 'bg-blue-50', iconColor: 'text-blue-600' },
        { icon: Lock, label: 'Security', description: 'Password and authentication', color: 'bg-purple-50', iconColor: 'text-purple-600' },
        { icon: Mail, label: 'Email Preferences', description: 'Manage email notifications', color: 'bg-green-50', iconColor: 'text-green-600' },
      ]
    },
    {
      title: 'Business Settings',
      items: [
        { icon: CreditCard, label: 'Billing & Subscription', description: 'Manage your plan and payments', color: 'bg-orange-50', iconColor: 'text-[#FF6B00]' },
        { icon: Palette, label: 'Appearance', description: 'Customize your dashboard theme', color: 'bg-pink-50', iconColor: 'text-pink-600' },
        { icon: Globe, label: 'Language & Region', description: 'Set your preferred language', color: 'bg-teal-50', iconColor: 'text-teal-600' },
      ]
    }
  ];

  const breadcrumbItems = [
    { icon: <HomeIcon />, label: 'Home', path: '/dashboard', active: false },
    { icon: <SettingsIcon />, label: 'Settings', path: '/settings', active: true }
  ];

  return (
    <div>
      {/* Header */}
      <div className='relative'>
        <BreadCrumb items={breadcrumbItems} showUser={true} />
      </div>
      {/* Profile Card */}
      <div className="bg-white rounded-2xl p-7 border border-gray-200 mb-8 shadow-sm hover:shadow-md transition-all">
        <div className="flex items-center gap-5">
          <div className="w-24 h-24 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-2xl flex items-center justify-center text-white text-3xl font-bold shadow-lg">
            {user.avatar}
          </div>
          <div className="flex-1">
            <h2 className="text-2xl font-bold text-gray-900 mb-1">{user.name}</h2>
            <p className="text-sm text-gray-600 font-medium mb-2">Business Owner</p>
            <p className="text-sm text-gray-500">ram@business.com</p>
          </div>
          <button className="px-6 py-2.5 border-2 border-gray-300 rounded-xl text-sm font-semibold hover:bg-gray-50 transition-all">
            Edit Profile
          </button>
        </div>
      </div>

      {/* Settings Groups */}
      {settingsGroups.map((group, groupIndex) => (
        <div key={groupIndex} className="mb-8">
          <h3 className="text-lg font-bold text-gray-900 mb-4">{group.title}</h3>
          <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden shadow-sm">
            {group.items.map((item, itemIndex) => {
              const Icon = item.icon;
              return (
                <button
                  key={itemIndex}
                  className={`w-full flex items-center gap-4 px-6 py-5 hover:bg-gray-50 transition-all ${itemIndex !== group.items.length - 1 ? 'border-b border-gray-200' : ''
                    }`}
                >
                  <div className={`w-12 h-12 ${item.color} rounded-xl flex items-center justify-center`}>
                    <Icon className={`w-6 h-6 ${item.iconColor}`} strokeWidth={2.5} />
                  </div>
                  <div className="flex-1 text-left">
                    <div className="text-sm font-semibold text-gray-900 mb-1">{item.label}</div>
                    <p className="text-xs text-gray-500 font-medium">{item.description}</p>
                  </div>
                  <ChevronRight className="w-5 h-5 text-gray-400" />
                </button>
              );
            })}
          </div>
        </div>
      ))}

      {/* Danger Zone */}
      <div className="mb-6">
        <h3 className="text-lg font-bold text-gray-900 mb-4">Danger Zone</h3>
        <div className="bg-white rounded-2xl border-2 border-red-200 overflow-hidden shadow-sm">
          <button className="w-full flex items-center justify-between px-6 py-5 hover:bg-red-50 transition-all">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center">
                <XCircle className="w-6 h-6 text-red-600" strokeWidth={2.5} />
              </div>
              <div className="text-left">
                <div className="text-sm font-semibold text-red-600 mb-1">Delete Account</div>
                <p className="text-xs text-gray-500 font-medium">Permanently delete your account and all data</p>
              </div>
            </div>
            <ChevronRight className="w-5 h-5 text-red-400" />
          </button>
        </div>
      </div>
    </div>
  );
}

