import React, { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { MobileContainer } from '../../../shared-minimal/components/mobile/MobileContainer';
import { useSettings } from '../hooks/useSettings';
import { useProfile, useUpdateProfile } from '../hooks/useProfile';
import { useAdminAccess } from '../../../core/auth/useAdminAccess';
import { useNavigationStore } from '../../../core/store';
import { DeleteAccountModal } from './DeleteAccountModal';
import { PendingDeletionBanner } from './PendingDeletionBanner';

interface ToggleSwitchProps {
  enabled: boolean;
  onChange: () => void;
  label: string;
  description?: string;
}

const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
  enabled,
  onChange,
  label,
  description
}) => (
  <div className="flex items-center justify-between py-2">
    <div>
      <p className="font-medium text-slate-800">{label}</p>
      {description && (
        <p className="text-sm text-slate-500">{description}</p>
      )}
    </div>
    <button
      onClick={onChange}
      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
        enabled ? 'bg-blue-600' : 'bg-gray-200'
      }`}
    >
      <span
        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
          enabled ? 'translate-x-6' : 'translate-x-1'
        }`}
      />
    </button>
  </div>
);

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-lg p-6 max-w-sm w-full">
        <h3 className="text-lg font-semibold text-slate-800 mb-4">{title}</h3>
        {children}
        <div className="flex justify-end mt-4">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

export const MobileSettingsScreen: React.FC = () => {
  const { user, logout } = useAuth0();
  const { navigateToScreen } = useNavigationStore();
  const { settings, updateSetting, isLoading, error } = useSettings();
  const { data: profile, isLoading: profileLoading } = useProfile();
  const updateProfileMutation = useUpdateProfile();
  const { isAdmin, loading: adminLoading } = useAdminAccess();
  const [showDataExport, setShowDataExport] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [isEditingProfile, setIsEditingProfile] = useState(false);
  const [editedDisplayName, setEditedDisplayName] = useState('');
  const [editedNotificationEmail, setEditedNotificationEmail] = useState('');

  // Initialize edit form when profile loads or edit mode starts
  React.useEffect(() => {
    if (profile && isEditingProfile) {
      setEditedDisplayName(profile.displayName || '');
      setEditedNotificationEmail(profile.notificationEmail || '');
    }
  }, [profile, isEditingProfile]);

  const handleLogout = () => {
    logout({
      logoutParams: {
        returnTo: window.location.origin
      }
    });
  };

  const handleExportData = () => {
    // TODO: Implement data export functionality
    console.log('Exporting user data...');
    setShowDataExport(false);
  };


  const handleEditProfile = () => {
    setIsEditingProfile(true);
  };

  const handleCancelEdit = () => {
    setIsEditingProfile(false);
    setEditedDisplayName(profile?.displayName || '');
    setEditedNotificationEmail(profile?.notificationEmail || '');
  };

  const handleSaveProfile = async () => {
    const updates: { displayName?: string; notificationEmail?: string } = {};

    if (editedDisplayName !== (profile?.displayName || '')) {
      updates.displayName = editedDisplayName;
    }

    if (editedNotificationEmail !== (profile?.notificationEmail || '')) {
      updates.notificationEmail = editedNotificationEmail || undefined;
    }

    if (Object.keys(updates).length === 0) {
      setIsEditingProfile(false);
      return;
    }

    try {
      await updateProfileMutation.mutateAsync(updates);
      setIsEditingProfile(false);
    } catch (error) {
      // Error is handled by the mutation hook
    }
  };

  // Loading state
  if (isLoading) {
    return (
      <MobileContainer>
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            <div className="text-slate-500 mb-2">Loading settings...</div>
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          </div>
        </div>
      </MobileContainer>
    );
  }

  // Error state
  if (error) {
    return (
      <MobileContainer>
        <div className="space-y-4 pb-20 p-4">
          <GlassCard padding="md">
            <div className="text-center py-8">
              <p className="text-red-600 mb-4">Failed to load settings</p>
              <p className="text-sm text-slate-600 mb-4">{error}</p>
              <button
                onClick={() => window.location.reload()}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg"
              >
                Retry
              </button>
            </div>
          </GlassCard>
        </div>
      </MobileContainer>
    );
  }

  return (
    <MobileContainer>
      <div className="space-y-4 pb-20 p-4">
        {/* Header */}
        <div className="text-center mb-6">
          <h1 className="text-2xl font-bold text-slate-800">Settings</h1>
          <p className="text-slate-500 mt-2">Manage your account and preferences</p>
        </div>

        {/* Pending Deletion Banner */}
        <PendingDeletionBanner />

        {/* Profile Section */}
        <GlassCard padding="md">
          <div>
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-lg font-semibold text-slate-800">Profile</h2>
              {!isEditingProfile && !profileLoading && (
                <button
                  onClick={handleEditProfile}
                  className="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-200 transition-colors"
                  style={{ minHeight: '44px', minWidth: '44px' }}
                >
                  Edit
                </button>
              )}
            </div>

            {profileLoading ? (
              <div className="flex justify-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
              </div>
            ) : isEditingProfile ? (
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Email
                  </label>
                  <input
                    type="email"
                    value={profile?.email || ''}
                    disabled
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-100 text-slate-500"
                    style={{ fontSize: '16px', minHeight: '44px' }}
                  />
                  <p className="text-xs text-slate-500 mt-1">Email is managed by your account provider</p>
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Display Name
                  </label>
                  <input
                    type="text"
                    value={editedDisplayName}
                    onChange={(e) => setEditedDisplayName(e.target.value)}
                    placeholder="Enter your display name"
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    style={{ fontSize: '16px', minHeight: '44px' }}
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">
                    Notification Email
                  </label>
                  <input
                    type="email"
                    value={editedNotificationEmail}
                    onChange={(e) => setEditedNotificationEmail(e.target.value)}
                    placeholder="Leave blank to use your primary email"
                    className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    style={{ fontSize: '16px', minHeight: '44px' }}
                  />
                  <p className="text-xs text-slate-500 mt-1">Optional: Use a different email for notifications</p>
                </div>

                <div className="flex space-x-3 pt-2">
                  <button
                    onClick={handleCancelEdit}
                    disabled={updateProfileMutation.isPending}
                    className="flex-1 py-2.5 px-4 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors disabled:opacity-50"
                    style={{ minHeight: '44px' }}
                  >
                    Cancel
                  </button>
                  <button
                    onClick={handleSaveProfile}
                    disabled={updateProfileMutation.isPending}
                    className="flex-1 py-2.5 px-4 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center"
                    style={{ minHeight: '44px' }}
                  >
                    {updateProfileMutation.isPending ? (
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                    ) : (
                      'Save'
                    )}
                  </button>
                </div>
              </div>
            ) : (
              <div>
                <div className="flex items-center space-x-3 mb-4">
                  {user?.picture ? (
                    <img
                      src={user.picture}
                      alt="Profile"
                      className="w-12 h-12 rounded-full"
                    />
                  ) : (
                    <div className="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
                      {profile?.displayName?.charAt(0) || user?.name?.charAt(0) || user?.email?.charAt(0)}
                    </div>
                  )}
                  <div className="min-w-0 flex-1">
                    <p className="font-medium text-slate-800 truncate">
                      {profile?.displayName || user?.name || 'User'}
                    </p>
                    <p className="text-sm text-slate-500 truncate">{profile?.email || user?.email}</p>
                  </div>
                </div>

                <div className="space-y-2 pt-3 border-t border-slate-200">
                  <div>
                    <p className="text-xs font-medium text-slate-500 uppercase">Display Name</p>
                    <p className="text-sm text-slate-800">{profile?.displayName || 'Not set'}</p>
                  </div>
                  <div>
                    <p className="text-xs font-medium text-slate-500 uppercase">Notification Email</p>
                    <p className="text-sm text-slate-800">{profile?.notificationEmail || 'Using primary email'}</p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </GlassCard>

        {/* Notifications Section */}
        <GlassCard padding="md">
          <div>
            <h2 className="text-lg font-semibold text-slate-800 mb-4">Notifications</h2>
            <div className="space-y-3">
              <ToggleSwitch
                enabled={settings.notifications.email}
                onChange={() => updateSetting('notifications', {
                  ...settings.notifications,
                  email: !settings.notifications.email
                })}
                label="Email Notifications"
                description="Receive updates via email"
              />
              <ToggleSwitch
                enabled={settings.notifications.push}
                onChange={() => updateSetting('notifications', {
                  ...settings.notifications,
                  push: !settings.notifications.push
                })}
                label="Push Notifications"
                description="Receive mobile push notifications"
              />
              <ToggleSwitch
                enabled={settings.notifications.maintenance}
                onChange={() => updateSetting('notifications', {
                  ...settings.notifications,
                  maintenance: !settings.notifications.maintenance
                })}
                label="Maintenance Reminders"
                description="Get reminded about vehicle maintenance"
              />
            </div>
          </div>
        </GlassCard>

        {/* Appearance & Units Section */}
        <GlassCard padding="md">
          <div>
            <h2 className="text-lg font-semibold text-slate-800 mb-4">Appearance & Units</h2>
            <div className="space-y-4">
              <ToggleSwitch
                enabled={settings.darkMode}
                onChange={() => updateSetting('darkMode', !settings.darkMode)}
                label="Dark Mode"
                description="Switch to dark theme"
              />

              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-slate-800">Unit System</p>
                  <p className="text-sm text-slate-500">
                    Currently using {settings.unitSystem === 'imperial' ? 'Miles & Gallons' : 'Kilometers & Liters'}
                  </p>
                </div>
                <button
                  onClick={() => updateSetting('unitSystem', settings.unitSystem === 'imperial' ? 'metric' : 'imperial')}
                  className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-200 transition-colors"
                >
                  {settings.unitSystem === 'imperial' ? 'Switch to Metric' : 'Switch to Imperial'}
                </button>
              </div>
            </div>
          </div>
        </GlassCard>

        {/* Data Management Section */}
        <GlassCard padding="md">
          <div>
            <h2 className="text-lg font-semibold text-slate-800 mb-4">Data Management</h2>
            <div className="space-y-3">
              <button
                onClick={() => setShowDataExport(true)}
                className="w-full text-left p-3 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors"
              >
                Export My Data
              </button>
              <p className="text-sm text-slate-500">
                Download a copy of all your vehicle and fuel data
              </p>
            </div>
          </div>
        </GlassCard>

        {/* Admin Console Section */}
        {!adminLoading && isAdmin && (
          <GlassCard padding="md">
            <div>
              <h2 className="text-lg font-semibold text-blue-600 mb-4">Admin Console</h2>
              <div className="space-y-3">
                <button
                  onClick={() => navigateToScreen('AdminUsers')}
                  className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
                  style={{ minHeight: '44px' }}
                >
                  <div className="font-semibold">User Management</div>
                  <div className="text-sm text-blue-600 mt-1">Manage admin users and permissions</div>
                </button>
                <button
                  onClick={() => navigateToScreen('AdminCatalog')}
                  className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
                  style={{ minHeight: '44px' }}
                >
                  <div className="font-semibold">Vehicle Catalog</div>
                  <div className="text-sm text-blue-600 mt-1">Manage makes, models, and engines</div>
                </button>
                <button
                  onClick={() => navigateToScreen('AdminStations')}
                  className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
                  style={{ minHeight: '44px' }}
                >
                  <div className="font-semibold">Station Management</div>
                  <div className="text-sm text-blue-600 mt-1">Manage gas station data and locations</div>
                </button>
                <button
                  onClick={() => navigateToScreen('AdminEmailTemplates')}
                  className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
                  style={{ minHeight: '44px' }}
                >
                  <div className="font-semibold">Email Templates</div>
                  <div className="text-sm text-blue-600 mt-1">Manage notification email templates</div>
                </button>
              </div>
            </div>
          </GlassCard>
        )}

        {/* Account Actions Section */}
        <GlassCard padding="md">
          <div>
            <h2 className="text-lg font-semibold text-slate-800 mb-4">Account Actions</h2>
            <div className="space-y-3">
              <button
                onClick={handleLogout}
                className="w-full py-3 px-4 bg-gray-100 text-gray-700 rounded-lg text-left font-medium hover:bg-gray-200 transition-colors"
              >
                Sign Out
              </button>
              <button
                onClick={() => setShowDeleteConfirm(true)}
                className="w-full py-3 px-4 bg-red-50 text-red-600 rounded-lg text-left font-medium hover:bg-red-100 transition-colors"
              >
                Delete Account
              </button>
            </div>
          </div>
        </GlassCard>

        {/* Data Export Modal */}
        <Modal
          isOpen={showDataExport}
          onClose={() => setShowDataExport(false)}
          title="Export Data"
        >
          <p className="text-slate-600 mb-4">
            This will create a downloadable file containing all your vehicle data, fuel logs, and preferences.
          </p>
          <div className="flex space-x-3">
            <button
              onClick={() => setShowDataExport(false)}
              className="flex-1 py-2 px-4 bg-gray-200 text-gray-700 rounded-lg font-medium"
            >
              Cancel
            </button>
            <button
              onClick={handleExportData}
              className="flex-1 py-2 px-4 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
            >
              Export
            </button>
          </div>
        </Modal>

        {/* Delete Account Modal */}
        <DeleteAccountModal
          isOpen={showDeleteConfirm}
          onClose={() => setShowDeleteConfirm(false)}
        />
      </div>
    </MobileContainer>
  );
};