"use client";

import { Save, Bell, Lock } from "lucide-react";
import { useState } from "react";

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    emailNotifications: true,
    pushNotifications: false,
    marketingEmails: false,
    publicProfile: true,
    dataCollection: true,
  });

  const handleToggle = (key: keyof typeof settings) => {
    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  return (
    <div className="p-6 max-w-3xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Settings</h1>
        <p className="text-gray-600">Manage your preferences</p>
      </div>

      {/* Notification Settings */}
      <div className="bg-white border border-gray-200 rounded-xl p-8 mb-6">
        <div className="flex items-center gap-3 mb-6">
          <Bell className="w-6 h-6" />
          <h3 className="text-lg font-semibold">Notifications</h3>
        </div>

        <div className="space-y-4">
          {[
            {
              key: "emailNotifications" as const,
              label: "Email Notifications",
              desc: "Receive updates about new characters and messages",
            },
            {
              key: "pushNotifications" as const,
              label: "Push Notifications",
              desc: "Get notifications on your device",
            },
            {
              key: "marketingEmails" as const,
              label: "Marketing Emails",
              desc: "Receive promotional content and special offers",
            },
          ].map((item) => (
            <div key={item.key} className="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
              <div>
                <p className="font-medium">{item.label}</p>
                <p className="text-sm text-gray-600">{item.desc}</p>
              </div>
              <label className="relative inline-flex cursor-pointer">
                <input
                  type="checkbox"
                  checked={settings[item.key]}
                  onChange={() => handleToggle(item.key)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-black 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-black"></div>
              </label>
            </div>
          ))}
        </div>
      </div>

      {/* Privacy Settings */}
      <div className="bg-white border border-gray-200 rounded-xl p-8 mb-6">
        <div className="flex items-center gap-3 mb-6">
          <Lock className="w-6 h-6" />
          <h3 className="text-lg font-semibold">Privacy</h3>
        </div>

        <div className="space-y-4">
          {[
            {
              key: "publicProfile" as const,
              label: "Public Profile",
              desc: "Allow other users to see your profile",
            },
            {
              key: "dataCollection" as const,
              label: "Data Collection",
              desc: "Allow us to collect usage data for improvements",
            },
          ].map((item) => (
            <div key={item.key} className="flex items-center justify-between py-3 border-b border-gray-200 last:border-0">
              <div>
                <p className="font-medium">{item.label}</p>
                <p className="text-sm text-gray-600">{item.desc}</p>
              </div>
              <label className="relative inline-flex cursor-pointer">
                <input
                  type="checkbox"
                  checked={settings[item.key]}
                  onChange={() => handleToggle(item.key)}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-black 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-black"></div>
              </label>
            </div>
          ))}
        </div>
      </div>

      {/* Save Button */}
      <button className="flex items-center justify-center gap-2 w-full px-6 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition">
        <Save className="w-5 h-5" />
        Save Settings
      </button>
    </div>
  );
}