'use client';

import DashboardLayout from '@/layouts/DashboardLayout';
import { 
  UserIcon, 
  BellIcon, 
  GlobeAltIcon, 
  ShieldCheckIcon, 
  DevicePhoneMobileIcon,
  EyeIcon,
  EyeSlashIcon,
  PencilIcon,
  TrashIcon
} from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';
import { useState } from 'react';

const userProfile = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  phone: '+62 812-3456-7890',
  avatar: '/api/placeholder/100/100',
  joinDate: '2023-06-15',
  lastLogin: '2024-01-24 14:30'
};

const notificationSettings = {
  emailNotifications: true,
  pushNotifications: true,
  smsNotifications: false,
  courseReminders: true,
  assignmentDeadlines: true,
  certificateUpdates: true,
  weeklyReports: false
};

const privacySettings = {
  profileVisibility: 'public',
  showProgress: true,
  showCertificates: true,
  allowMessages: true,
  dataSharing: false
};

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState('profile');
  const [showPassword, setShowPassword] = useState(false);
  const [notifications, setNotifications] = useState(notificationSettings);
  const [privacy, setPrivacy] = useState(privacySettings);
  const [language, setLanguage] = useState('id');
  const [theme, setTheme] = useState('light');

  const tabs = [
    { id: 'profile', label: 'Profil', icon: UserIcon },
    { id: 'notifications', label: 'Notifikasi', icon: BellIcon },
    { id: 'privacy', label: 'Privasi', icon: ShieldCheckIcon },
    { id: 'preferences', label: 'Preferensi', icon: GlobeAltIcon },
    { id: 'devices', label: 'Perangkat', icon: DevicePhoneMobileIcon }
  ];

  const handleNotificationChange = (key: string, value: boolean) => {
    setNotifications(prev => ({ ...prev, [key]: value }));
  };

  const handlePrivacyChange = (key: string, value: any) => {
    setPrivacy(prev => ({ ...prev, [key]: value }));
  };

  const renderProfileTab = () => (
    <div className="space-y-6">
      {/* Profile Picture */}
      <div className="flex items-center space-x-6">
        <div className="relative">
          <div className="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center">
            <UserIcon className="h-12 w-12 text-blue-600" />
          </div>
          <button className="absolute -bottom-1 -right-1 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700">
            <PencilIcon className="h-3 w-3" />
          </button>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-900">{userProfile.name}</h3>
          <p className="text-gray-600">Bergabung sejak {new Date(userProfile.joinDate).toLocaleDateString('id-ID')}</p>
          <p className="text-sm text-gray-500">Login terakhir: {userProfile.lastLogin}</p>
        </div>
      </div>

      {/* Profile Form */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap</label>
          <input 
            type="text" 
            defaultValue={userProfile.name}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
          <input 
            type="email" 
            defaultValue={userProfile.email}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Nomor Telepon</label>
          <input 
            type="tel" 
            defaultValue={userProfile.phone}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>
        
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">Password Baru</label>
          <div className="relative">
            <input 
              type={showPassword ? 'text' : 'password'}
              placeholder="Masukkan password baru"
              className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <button 
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
            >
              {showPassword ? <EyeSlashIcon className="h-5 w-5" /> : <EyeIcon className="h-5 w-5" />}
            </button>
          </div>
        </div>
      </div>

      <div className="flex justify-end space-x-3">
        <button className="px-4 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">
          Batal
        </button>
        <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
          Simpan Perubahan
        </button>
      </div>
    </div>
  );

  const renderNotificationsTab = () => (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Notifikasi Email</h3>
        
        {Object.entries({
          emailNotifications: 'Notifikasi Email Umum',
          courseReminders: 'Pengingat Kursus',
          assignmentDeadlines: 'Deadline Tugas',
          certificateUpdates: 'Update Sertifikat',
          weeklyReports: 'Laporan Mingguan'
        }).map(([key, label]) => (
          <div key={key} className="flex items-center justify-between py-3 border-b border-gray-100">
            <div>
              <p className="font-medium text-gray-900">{label}</p>
              <p className="text-sm text-gray-600">Terima notifikasi melalui email</p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input 
                type="checkbox" 
                checked={notifications[key as keyof typeof notifications]}
                onChange={(e) => handleNotificationChange(key, e.target.checked)}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-blue-600"></div>
            </label>
          </div>
        ))}
      </div>

      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Notifikasi Push</h3>
        
        <div className="flex items-center justify-between py-3 border-b border-gray-100">
          <div>
            <p className="font-medium text-gray-900">Push Notifications</p>
            <p className="text-sm text-gray-600">Terima notifikasi di perangkat</p>
          </div>
          <label className="relative inline-flex items-center cursor-pointer">
            <input 
              type="checkbox" 
              checked={notifications.pushNotifications}
              onChange={(e) => handleNotificationChange('pushNotifications', e.target.checked)}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-blue-600"></div>
          </label>
        </div>
      </div>
    </div>
  );

  const renderPrivacyTab = () => (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Visibilitas Profil</h3>
        
        <div className="space-y-3">
          {[
            { value: 'public', label: 'Publik', desc: 'Profil dapat dilihat semua orang' },
            { value: 'private', label: 'Privat', desc: 'Hanya Anda yang dapat melihat profil' },
            { value: 'friends', label: 'Teman', desc: 'Hanya teman yang dapat melihat profil' }
          ].map((option) => (
            <label key={option.value} className="flex items-center space-x-3 cursor-pointer">
              <input 
                type="radio" 
                name="profileVisibility"
                value={option.value}
                checked={privacy.profileVisibility === option.value}
                onChange={(e) => handlePrivacyChange('profileVisibility', e.target.value)}
                className="text-blue-600 focus:ring-blue-500"
              />
              <div>
                <p className="font-medium text-gray-900">{option.label}</p>
                <p className="text-sm text-gray-600">{option.desc}</p>
              </div>
            </label>
          ))}
        </div>
      </div>

      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Pengaturan Data</h3>
        
        {Object.entries({
          showProgress: 'Tampilkan Progress Belajar',
          showCertificates: 'Tampilkan Sertifikat',
          allowMessages: 'Izinkan Pesan dari Pengguna Lain',
          dataSharing: 'Berbagi Data untuk Analitik'
        }).map(([key, label]) => (
          <div key={key} className="flex items-center justify-between py-3 border-b border-gray-100">
            <p className="font-medium text-gray-900">{label}</p>
            <label className="relative inline-flex items-center cursor-pointer">
              <input 
                type="checkbox" 
                checked={privacy[key as keyof typeof privacy] as boolean}
                onChange={(e) => handlePrivacyChange(key, e.target.checked)}
                className="sr-only peer"
              />
              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 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-blue-600"></div>
            </label>
          </div>
        ))}
      </div>
    </div>
  );

  const renderPreferencesTab = () => (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Bahasa</h3>
        <select 
          value={language}
          onChange={(e) => setLanguage(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
          <option value="id">Bahasa Indonesia</option>
          <option value="en">English</option>
        </select>
      </div>

      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Tema</h3>
        <div className="space-y-3">
          {[
            { value: 'light', label: 'Terang' },
            { value: 'dark', label: 'Gelap' },
            { value: 'auto', label: 'Otomatis' }
          ].map((option) => (
            <label key={option.value} className="flex items-center space-x-3 cursor-pointer">
              <input 
                type="radio" 
                name="theme"
                value={option.value}
                checked={theme === option.value}
                onChange={(e) => setTheme(e.target.value)}
                className="text-blue-600 focus:ring-blue-500"
              />
              <span className="font-medium text-gray-900">{option.label}</span>
            </label>
          ))}
        </div>
      </div>
    </div>
  );

  const renderDevicesTab = () => (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-gray-900">Perangkat Aktif</h3>
        
        <div className="space-y-3">
          {[
            {
              name: 'Chrome di Windows',
              location: 'Jakarta, Indonesia',
              lastActive: '2024-01-24 14:30',
              current: true
            },
            {
              name: 'Mobile App di Android',
              location: 'Jakarta, Indonesia',
              lastActive: '2024-01-23 09:15',
              current: false
            },
            {
              name: 'Safari di MacBook',
              location: 'Bandung, Indonesia',
              lastActive: '2024-01-20 16:45',
              current: false
            }
          ].map((device, index) => (
            <div key={index} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
              <div className="flex items-center space-x-4">
                <DevicePhoneMobileIcon className="h-8 w-8 text-gray-400" />
                <div>
                  <p className="font-medium text-gray-900">
                    {device.name}
                    {device.current && (
                      <span className="ml-2 px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                        Saat ini
                      </span>
                    )}
                  </p>
                  <p className="text-sm text-gray-600">{device.location}</p>
                  <p className="text-xs text-gray-500">Terakhir aktif: {device.lastActive}</p>
                </div>
              </div>
              {!device.current && (
                <button className="text-red-600 hover:text-red-800">
                  <TrashIcon className="h-5 w-5" />
                </button>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderTabContent = () => {
    switch (activeTab) {
      case 'profile': return renderProfileTab();
      case 'notifications': return renderNotificationsTab();
      case 'privacy': return renderPrivacyTab();
      case 'preferences': return renderPreferencesTab();
      case 'devices': return renderDevicesTab();
      default: return renderProfileTab();
    }
  };

  return (
    <DashboardLayout>
      <div className="p-6">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Pengaturan</h1>
          <p className="text-gray-600">Kelola profil dan preferensi akun Anda</p>
        </div>

        <div className="flex flex-col lg:flex-row gap-8">
          {/* Sidebar Tabs */}
          <div className="lg:w-64">
            <nav className="space-y-1">
              {tabs.map((tab) => {
                const Icon = tab.icon;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={cn(
                      "w-full flex items-center px-4 py-3 text-left rounded-lg transition-colors",
                      activeTab === tab.id
                        ? "bg-blue-50 text-blue-700 border-l-4 border-blue-700"
                        : "text-gray-700 hover:bg-gray-50"
                    )}
                  >
                    <Icon className="h-5 w-5 mr-3" />
                    {tab.label}
                  </button>
                );
              })}
            </nav>
          </div>

          {/* Content */}
          <div className="flex-1">
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
              {renderTabContent()}
            </div>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}