import { Bell, Shield, Eye, Volume2 } from 'lucide-react';

export default function SettingsPage() {
  return (
    <div className="min-h-screen bg-deep-graphite">
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-2xl font-bold text-white mb-8">Settings</h1>

        <div className="space-y-8">
          {/* Notification Settings */}
          <section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
            <div className="flex items-center gap-3 mb-6">
              <Bell className="h-5 w-5 text-primary-blue" />
              <h2 className="text-lg font-semibold text-white">Notifications</h2>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Protest Filed Against You</p>
                  <p className="text-xs text-gray-400">Get notified when someone files a protest involving you</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="modal">Modal (Blocking)</option>
                  <option value="toast">Toast (Popup)</option>
                  <option value="silent">Silent (Notification Center)</option>
                </select>
              </div>

              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Vote Requested</p>
                  <p className="text-xs text-gray-400">Get notified when your vote is needed on a protest</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="modal">Modal (Blocking)</option>
                  <option value="toast">Toast (Popup)</option>
                  <option value="silent">Silent (Notification Center)</option>
                </select>
              </div>

              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Defense Required</p>
                  <p className="text-xs text-gray-400">Get notified when you need to submit a defense</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="modal">Modal (Blocking)</option>
                  <option value="toast">Toast (Popup)</option>
                  <option value="silent">Silent (Notification Center)</option>
                </select>
              </div>

              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Penalty Issued</p>
                  <p className="text-xs text-gray-400">Get notified when you receive a penalty</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="toast" selected>Toast (Popup)</option>
                  <option value="modal">Modal (Blocking)</option>
                  <option value="silent">Silent (Notification Center)</option>
                </select>
              </div>

              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Race Starting Soon</p>
                  <p className="text-xs text-gray-400">Reminder before scheduled races begin</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="toast">Toast (Popup)</option>
                  <option value="modal">Modal (Blocking)</option>
                  <option value="silent">Silent (Notification Center)</option>
                </select>
              </div>

              <div className="flex items-center justify-between py-3">
                <div>
                  <p className="text-sm font-medium text-white">League Announcements</p>
                  <p className="text-xs text-gray-400">Updates from league administrators</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="silent">Silent (Notification Center)</option>
                  <option value="toast">Toast (Popup)</option>
                  <option value="modal">Modal (Blocking)</option>
                </select>
              </div>
            </div>
          </section>

          {/* Display Settings */}
          <section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
            <div className="flex items-center gap-3 mb-6">
              <Eye className="h-5 w-5 text-primary-blue" />
              <h2 className="text-lg font-semibold text-white">Display</h2>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Toast Duration</p>
                  <p className="text-xs text-gray-400">How long toast notifications stay visible</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="3000">3 seconds</option>
                  <option value="5000" selected>5 seconds</option>
                  <option value="8000">8 seconds</option>
                  <option value="10000">10 seconds</option>
                </select>
              </div>

              <div className="flex items-center justify-between py-3">
                <div>
                  <p className="text-sm font-medium text-white">Toast Position</p>
                  <p className="text-xs text-gray-400">Where toast notifications appear on screen</p>
                </div>
                <select className="bg-deep-graphite border border-charcoal-outline rounded px-3 py-1.5 text-sm text-white">
                  <option value="top-right">Top Right</option>
                  <option value="top-left">Top Left</option>
                  <option value="bottom-right" selected>Bottom Right</option>
                  <option value="bottom-left">Bottom Left</option>
                </select>
              </div>
            </div>
          </section>

          {/* Sound Settings */}
          <section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
            <div className="flex items-center gap-3 mb-6">
              <Volume2 className="h-5 w-5 text-primary-blue" />
              <h2 className="text-lg font-semibold text-white">Sound</h2>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Notification Sounds</p>
                  <p className="text-xs text-gray-400">Play sounds for new notifications</p>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" defaultChecked />
                  <div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
                </label>
              </div>

              <div className="flex items-center justify-between py-3">
                <div>
                  <p className="text-sm font-medium text-white">Urgent Notification Sound</p>
                  <p className="text-xs text-gray-400">Special sound for modal notifications</p>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" defaultChecked />
                  <div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
                </label>
              </div>
            </div>
          </section>

          {/* Privacy Settings */}
          <section className="bg-iron-gray rounded-lg border border-charcoal-outline p-6">
            <div className="flex items-center gap-3 mb-6">
              <Shield className="h-5 w-5 text-primary-blue" />
              <h2 className="text-lg font-semibold text-white">Privacy</h2>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between py-3 border-b border-charcoal-outline">
                <div>
                  <p className="text-sm font-medium text-white">Show Online Status</p>
                  <p className="text-xs text-gray-400">Let others see when you're online</p>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" defaultChecked />
                  <div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
                </label>
              </div>

              <div className="flex items-center justify-between py-3">
                <div>
                  <p className="text-sm font-medium text-white">Public Profile</p>
                  <p className="text-xs text-gray-400">Allow non-league members to view your profile</p>
                </div>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" defaultChecked />
                  <div className="w-11 h-6 bg-charcoal-outline peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-blue"></div>
                </label>
              </div>
            </div>
          </section>

          {/* Save Button */}
          <div className="flex justify-end">
            <button className="px-6 py-2 bg-primary-blue text-white font-medium rounded-lg hover:bg-primary-blue/90 transition-colors">
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}