bakery-ia/frontend/src/pages/app/settings/profile/NewProfileSettingsPage.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import {
  User,
  Mail,
  Phone,
  Lock,
  Globe,
  Clock,
  Camera,
  Save,
  X,
  Bell,
  Shield,
  Download,
  Trash2,
  AlertCircle,
  Cookie,
  ExternalLink,
  Check
} from 'lucide-react';
import { Button, Card, Avatar, Input, Select, SettingSection, SettingRow } from '../../../../components/ui';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
import { PageHeader } from '../../../../components/layout';
import { showToast } from '../../../../utils/toast';
import { useAuthUser, useAuthActions } from '../../../../stores/auth.store';
import { useAuthProfile, useUpdateProfile, useChangePassword } from '../../../../api/hooks/auth';
import { useCurrentTenant } from '../../../../stores';

// Import the communication preferences component
import CommunicationPreferences, { type NotificationPreferences } from './CommunicationPreferences';

interface ProfileFormData {
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  language: string;
  timezone: string;
  avatar?: string;
}

interface PasswordData {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

const NewProfileSettingsPage: React.FC = () => {
  const { t } = useTranslation('settings');
  const navigate = useNavigate();

  const user = useAuthUser();
  const { logout } = useAuthActions();
  const currentTenant = useCurrentTenant();

  const { data: profile, isLoading: profileLoading } = useAuthProfile();
  const updateProfileMutation = useUpdateProfile();
  const changePasswordMutation = useChangePassword();

  const [activeTab, setActiveTab] = useState('personal');
  const [isEditing, setIsEditing] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [showPasswordForm, setShowPasswordForm] = useState(false);

  // Export & Delete states
  const [isExporting, setIsExporting] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [deleteConfirmEmail, setDeleteConfirmEmail] = useState('');
  const [deletePassword, setDeletePassword] = useState('');
  const [deleteReason, setDeleteReason] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);

  const [profileData, setProfileData] = useState<ProfileFormData>({
    first_name: '',
    last_name: '',
    email: '',
    phone: '',
    language: 'es',
    timezone: 'Europe/Madrid'
  });

  const [passwordData, setPasswordData] = useState<PasswordData>({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  // Update profile data when profile is loaded
  React.useEffect(() => {
    if (profile) {
      setProfileData({
        first_name: profile.first_name || '',
        last_name: profile.last_name || '',
        email: profile.email || '',
        phone: profile.phone || '',
        language: profile.language || 'es',
        timezone: profile.timezone || 'Europe/Madrid',
        avatar: profile.avatar || ''
      });
    }
  }, [profile]);

  const languageOptions = [
    { value: 'es', label: 'Español' },
    { value: 'eu', label: 'Euskara' },
    { value: 'en', label: 'English' }
  ];

  const timezoneOptions = [
    { value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
    { value: 'Atlantic/Canary', label: 'Canarias (WET/WEST)' },
    { value: 'Europe/London', label: 'Londres (GMT/BST)' }
  ];

  const validateProfile = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!profileData.first_name.trim()) {
      newErrors.first_name = t('profile.fields.first_name') + ' ' + t('common.required');
    }

    if (!profileData.last_name.trim()) {
      newErrors.last_name = t('profile.fields.last_name') + ' ' + t('common.required');
    }

    if (!profileData.email.trim()) {
      newErrors.email = t('profile.fields.email') + ' ' + t('common.required');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileData.email)) {
      newErrors.email = t('common.error');
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const validatePassword = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!passwordData.currentPassword) {
      newErrors.currentPassword = t('profile.password.current_password') + ' ' + t('common.required');
    }

    if (!passwordData.newPassword) {
      newErrors.newPassword = t('profile.password.new_password') + ' ' + t('common.required');
    } else if (passwordData.newPassword.length < 8) {
      newErrors.newPassword = t('profile.password.password_requirements');
    }

    if (passwordData.newPassword !== passwordData.confirmPassword) {
      newErrors.confirmPassword = t('common.error');
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSaveProfile = async () => {
    if (!validateProfile()) return;

    setIsLoading(true);

    try {
      await updateProfileMutation.mutateAsync(profileData);

      setIsEditing(false);
      showToast.success(t('profile.save_changes'));
    } catch (error) {
      showToast.error(t('common.error'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleChangePasswordSubmit = async () => {
    if (!validatePassword()) return;

    setIsLoading(true);

    try {
      await changePasswordMutation.mutateAsync({
        current_password: passwordData.currentPassword,
        new_password: passwordData.newPassword,
        confirm_password: passwordData.confirmPassword
      });

      setShowPasswordForm(false);
      setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
      showToast.success(t('profile.password.change_success'));
    } catch (error) {
      showToast.error(t('profile.password.change_error'));
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (field: keyof ProfileFormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setProfileData(prev => ({ ...prev, [field]: e.target.value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSelectChange = (field: keyof ProfileFormData) => (value: string) => {
    setProfileData(prev => ({ ...prev, [field]: value }));
  };

  const handlePasswordChange = (field: keyof PasswordData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setPasswordData(prev => ({ ...prev, [field]: e.target.value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSaveNotificationPreferences = async (preferences: NotificationPreferences) => {
    try {
      await updateProfileMutation.mutateAsync({
        language: preferences.language,
        timezone: preferences.timezone,
        notification_preferences: preferences
      });
    } catch (error) {
      throw error;
    }
  };

  const handleDataExport = async () => {
    setIsExporting(true);
    try {
      const { authService } = await import('../../../../api');
      const exportData = await authService.exportMyData();

      // Convert to blob and download
      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `my_data_export_${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);

      showToast.success(t('profile.privacy.export_success'));
    } catch (err) {
      showToast.error(t('profile.privacy.export_error'));
    } finally {
      setIsExporting(false);
    }
  };

  const handleAccountDeletion = async () => {
    if (deleteConfirmEmail.toLowerCase() !== user?.email?.toLowerCase()) {
      showToast.error(t('common.error'));
      return;
    }

    if (!deletePassword) {
      showToast.error(t('common.error'));
      return;
    }

    setIsDeleting(true);
    try {
      const { authService } = await import('../../../../api');
      await authService.deleteAccount(deleteConfirmEmail, deletePassword, deleteReason);

      showToast.success(t('common.success'));

      setTimeout(() => {
        logout();
        navigate('/');
      }, 2000);
    } catch (err: any) {
      showToast.error(err.message || t('common.error'));
    } finally {
      setIsDeleting(false);
    }
  };

  if (profileLoading || !profile) {
    return (
      <div className="p-4 sm:p-6 space-y-6">
        <PageHeader
          title={t('profile.title')}
          description={t('profile.description')}
        />
        <div className="flex items-center justify-center h-64">
          <div className="w-8 h-8 animate-spin rounded-full border-4 border-[var(--color-primary)] border-t-transparent"></div>
          <span className="ml-2 text-[var(--text-secondary)]">{t('common.loading')}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 sm:p-6 space-y-6 pb-32">
      <PageHeader
        title={t('profile.title')}
        description={t('profile.description')}
      />

      {/* Profile Header */}
      <Card className="p-4 sm:p-6">
        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
          <div className="relative">
            <Avatar
              src={profile?.avatar || undefined}
              alt={profile?.full_name || `${profileData.first_name} ${profileData.last_name}` || 'Usuario'}
              name={profile?.avatar ? (profile?.full_name || `${profileData.first_name} ${profileData.last_name}`) : undefined}
              size="xl"
              className="w-16 h-16 sm:w-20 sm:h-20"
            />
            <button className="absolute -bottom-1 -right-1 bg-color-primary text-white rounded-full p-2 shadow-lg hover:bg-color-primary-dark transition-colors">
              <Camera className="w-3 h-3 sm:w-4 sm:h-4" />
            </button>
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="text-xl sm:text-2xl font-bold text-text-primary mb-1 truncate">
              {profileData.first_name} {profileData.last_name}
            </h1>
            <p className="text-sm sm:text-base text-text-secondary truncate flex items-center gap-2">
              <Mail className="w-4 h-4" />
              {profileData.email}
            </p>
            {user?.role && (
              <p className="text-xs sm:text-sm text-text-tertiary mt-1 flex items-center gap-2">
                <User className="w-4 h-4" />
                {user.role}
              </p>
            )}
            <div className="flex items-center gap-2 mt-2">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span className="text-xs sm:text-sm text-text-tertiary">{t('profile.online')}</span>
            </div>
          </div>
        </div>
      </Card>

      {/* Tabs Navigation */}
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="w-full sm:w-auto overflow-x-auto">
          <TabsTrigger value="personal" className="flex-1 sm:flex-none whitespace-nowrap">
            <User className="w-4 h-4 mr-2" />
            {t('profile.tabs.personal')}
          </TabsTrigger>
          <TabsTrigger value="notifications" className="flex-1 sm:flex-none whitespace-nowrap">
            <Bell className="w-4 h-4 mr-2" />
            {t('profile.tabs.notifications')}
          </TabsTrigger>
          <TabsTrigger value="privacy" className="flex-1 sm:flex-none whitespace-nowrap">
            <Shield className="w-4 h-4 mr-2" />
            {t('profile.tabs.privacy')}
          </TabsTrigger>
        </TabsList>

        {/* Tab 1: Personal Information */}
        <TabsContent value="personal">
          <div className="space-y-6">
            {/* Profile Form */}
            <SettingSection
              title={t('profile.personal_info')}
              description="Your personal information and account details"
              icon={<User className="w-5 h-5" />}
              headerAction={
                !isEditing ? (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setIsEditing(true)}
                  >
                    <User className="w-4 h-4 mr-2" />
                    {t('profile.edit_profile')}
                  </Button>
                ) : (
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setIsEditing(false)}
                      disabled={isLoading}
                    >
                      <X className="w-4 h-4 mr-1" />
                      {t('profile.cancel')}
                    </Button>
                    <Button
                      variant="primary"
                      size="sm"
                      onClick={handleSaveProfile}
                      isLoading={isLoading}
                      loadingText={t('common.saving')}
                    >
                      <Save className="w-4 h-4 mr-1" />
                      {t('profile.save_changes')}
                    </Button>
                  </div>
                )
              }
            >
              <div className="p-4 sm:p-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                  <Input
                    label={t('profile.fields.first_name')}
                    value={profileData.first_name}
                    onChange={handleInputChange('first_name')}
                    error={errors.first_name}
                    disabled={!isEditing || isLoading}
                    leftIcon={<User className="w-4 h-4" />}
                    required
                  />

                  <Input
                    label={t('profile.fields.last_name')}
                    value={profileData.last_name}
                    onChange={handleInputChange('last_name')}
                    error={errors.last_name}
                    disabled={!isEditing || isLoading}
                    required
                  />

                  <Input
                    type="email"
                    label={t('profile.fields.email')}
                    value={profileData.email}
                    onChange={handleInputChange('email')}
                    error={errors.email}
                    disabled={!isEditing || isLoading}
                    leftIcon={<Mail className="w-4 h-4" />}
                    required
                  />

                  <Input
                    type="tel"
                    label={t('profile.fields.phone')}
                    value={profileData.phone}
                    onChange={handleInputChange('phone')}
                    error={errors.phone}
                    disabled={!isEditing || isLoading}
                    placeholder="+34 600 000 000"
                    leftIcon={<Phone className="w-4 h-4" />}
                  />

                  <Select
                    label={t('profile.fields.language')}
                    options={languageOptions}
                    value={profileData.language}
                    onChange={handleSelectChange('language')}
                    disabled={!isEditing || isLoading}
                    leftIcon={<Globe className="w-4 h-4" />}
                  />

                  <Select
                    label={t('profile.fields.timezone')}
                    options={timezoneOptions}
                    value={profileData.timezone}
                    onChange={handleSelectChange('timezone')}
                    disabled={!isEditing || isLoading}
                    leftIcon={<Clock className="w-4 h-4" />}
                  />
                </div>
              </div>
            </SettingSection>

            {/* Security Section */}
            <SettingSection
              title="Security"
              description="Manage your password and security settings"
              icon={<Lock className="w-5 h-5" />}
              headerAction={
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setShowPasswordForm(!showPasswordForm)}
                >
                  <Lock className="w-4 h-4 mr-2" />
                  {t('profile.change_password')}
                </Button>
              }
            >
              {showPasswordForm && (
                <div className="p-4 sm:p-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6 mb-6">
                    <Input
                      type="password"
                      label={t('profile.password.current_password')}
                      value={passwordData.currentPassword}
                      onChange={handlePasswordChange('currentPassword')}
                      error={errors.currentPassword}
                      disabled={isLoading}
                      leftIcon={<Lock className="w-4 h-4" />}
                      required
                    />

                    <Input
                      type="password"
                      label={t('profile.password.new_password')}
                      value={passwordData.newPassword}
                      onChange={handlePasswordChange('newPassword')}
                      error={errors.newPassword}
                      disabled={isLoading}
                      leftIcon={<Lock className="w-4 h-4" />}
                      required
                    />

                    <Input
                      type="password"
                      label={t('profile.password.confirm_password')}
                      value={passwordData.confirmPassword}
                      onChange={handlePasswordChange('confirmPassword')}
                      error={errors.confirmPassword}
                      disabled={isLoading}
                      leftIcon={<Lock className="w-4 h-4" />}
                      required
                    />
                  </div>

                  <div className="flex gap-3 pt-4 border-t border-[var(--border-primary)] flex-wrap">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setShowPasswordForm(false);
                        setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
                        setErrors({});
                      }}
                      disabled={isLoading}
                    >
                      {t('profile.cancel')}
                    </Button>
                    <Button
                      variant="primary"
                      onClick={handleChangePasswordSubmit}
                      isLoading={isLoading}
                      loadingText={t('common.saving')}
                    >
                      <Check className="w-4 h-4 mr-2" />
                      {t('profile.password.change_password')}
                    </Button>
                  </div>
                </div>
              )}
            </SettingSection>
          </div>
        </TabsContent>

        {/* Tab 2: Notifications */}
        <TabsContent value="notifications">
          <CommunicationPreferences
            userEmail={profile?.email || ''}
            userPhone={profile?.phone || ''}
            userLanguage={profile?.language || 'es'}
            userTimezone={profile?.timezone || 'Europe/Madrid'}
            onSave={handleSaveNotificationPreferences}
            onReset={() => {}}
            hasChanges={false}
          />
        </TabsContent>

        {/* Tab 3: Privacy & Data */}
        <TabsContent value="privacy">
          <div className="space-y-6">
            {/* GDPR Rights Information */}
            <Card className="p-4 sm:p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
              <div className="flex items-start gap-3">
                <Shield className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                <div>
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                    {t('profile.privacy.gdpr_rights')}
                  </h3>
                  <p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
                    {t('profile.privacy.gdpr_description')}
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <a
                      href="/privacy"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
                    >
                      {t('profile.privacy.privacy_policy')}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                    <span className="text-gray-400">•</span>
                    <a
                      href="/terms"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline inline-flex items-center gap-1"
                    >
                      {t('profile.privacy.terms')}
                      <ExternalLink className="w-3 h-3" />
                    </a>
                  </div>
                </div>
              </div>
            </Card>

            {/* Cookie Preferences */}
            <SettingSection
              title={t('profile.privacy.cookie_preferences')}
              description="Gestiona tus preferencias de cookies"
              icon={<Cookie className="w-5 h-5" />}
              headerAction={
                <Button
                  onClick={() => navigate('/cookie-preferences')}
                  variant="outline"
                  size="sm"
                >
                  <Cookie className="w-4 h-4 mr-2" />
                  Gestionar
                </Button>
              }
            >
              <div></div>
            </SettingSection>

            {/* Data Export */}
            <SettingSection
              title={t('profile.privacy.export_data')}
              description={t('profile.privacy.export_description')}
              icon={<Download className="w-5 h-5" />}
              headerAction={
                <Button
                  onClick={handleDataExport}
                  variant="primary"
                  size="sm"
                  disabled={isExporting}
                >
                  <Download className="w-4 h-4 mr-2" />
                  {isExporting ? t('common.loading') : t('profile.privacy.export_button')}
                </Button>
              }
            >
              <div></div>
            </SettingSection>

            {/* Account Deletion */}
            <SettingSection
              title={t('profile.privacy.delete_account')}
              description={t('profile.privacy.delete_description')}
              icon={<Trash2 className="w-5 h-5" />}
              className="border-red-200 dark:border-red-800"
            >
              <div className="p-4 sm:p-6">
                <div className="flex items-start gap-3 mb-4">
                  <AlertCircle className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
                  <div className="flex-1">
                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                      {t('profile.privacy.delete_description')}
                    </p>
                    <p className="text-xs text-red-600 font-semibold">
                      {t('profile.privacy.delete_warning')}
                    </p>
                  </div>
                </div>

                <Button
                  onClick={() => setShowDeleteModal(true)}
                  variant="outline"
                  size="sm"
                  className="border-red-300 text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20"
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  {t('profile.privacy.delete_button')}
                </Button>
              </div>
            </SettingSection>
          </div>
        </TabsContent>
      </Tabs>

      {/* Delete Account Modal */}
      {showDeleteModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="max-w-md w-full p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
            <div className="flex items-start gap-3 mb-4">
              <AlertCircle className="w-6 h-6 text-red-600 flex-shrink-0" />
              <div>
                <h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-2">
                  {t('profile.privacy.delete_account')}?
                </h2>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {t('profile.privacy.delete_warning')}
                </p>
              </div>
            </div>

            <div className="space-y-4">
              <Input
                label="Confirma tu email"
                type="email"
                placeholder={user?.email || ''}
                value={deleteConfirmEmail}
                onChange={(e) => setDeleteConfirmEmail(e.target.value)}
                required
              />

              <Input
                label="Introduce tu contraseña"
                type="password"
                placeholder="••••••••"
                value={deletePassword}
                onChange={(e) => setDeletePassword(e.target.value)}
                required
                leftIcon={<Lock className="w-4 h-4" />}
              />

              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Motivo (opcional)
                </label>
                <textarea
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
                  rows={3}
                  placeholder="Ayúdanos a mejorar..."
                  value={deleteReason}
                  onChange={(e) => setDeleteReason(e.target.value)}
                />
              </div>
            </div>

            <div className="flex gap-3 mt-6 flex-wrap">
              <Button
                onClick={() => {
                  setShowDeleteModal(false);
                  setDeleteConfirmEmail('');
                  setDeletePassword('');
                  setDeleteReason('');
                }}
                variant="outline"
                className="flex-1"
                disabled={isDeleting}
              >
                {t('common.cancel')}
              </Button>
              <Button
                onClick={handleAccountDeletion}
                variant="primary"
                className="flex-1 bg-red-600 hover:bg-red-700 text-white"
                disabled={isDeleting || !deleteConfirmEmail || !deletePassword}
              >
                {isDeleting ? t('common.loading') : t('common.delete')}
              </Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};

export default NewProfileSettingsPage;