'use client';

import { useEffect, useState } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import { useAuth } from '@/context/AuthContext';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import {
  dashboardApi,
  authApi,
  UserProfile,
  UserSession,
} from '@/lib/api';
import { parseDate } from '@/lib/utils';
import toast from 'react-hot-toast';

interface AccountTabProps {
  onUpdate?: () => void;
}

/**
 * Merged Profile + Security tab: account info, edit-profile form, authentication
 * methods, change/set password, active sessions and account deletion.
 */
export default function AccountTab({ onUpdate }: AccountTabProps) {
  const { locale } = useLanguage();
  const { user, updateUser } = useAuth();

  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [sessions, setSessions] = useState<UserSession[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [changingPassword, setChangingPassword] = useState(false);
  const [settingPassword, setSettingPassword] = useState(false);

  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    languagePreference: '',
    rucNumber: '',
  });
  const [passwordForm, setPasswordForm] = useState({
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
  });
  const [newPasswordForm, setNewPasswordForm] = useState({
    password: '',
    confirmPassword: '',
  });

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      const [profileRes, sessionsRes] = await Promise.all([
        dashboardApi.getProfile(),
        dashboardApi.getSessions(),
      ]);
      setProfile(profileRes.profile);
      setSessions(sessionsRes.sessions);
      setFormData({
        name: profileRes.profile.name || '',
        phone: profileRes.profile.phone || '',
        languagePreference: profileRes.profile.languagePreference || '',
        rucNumber: profileRes.profile.rucNumber || '',
      });
    } catch (error) {
      toast.error(locale === 'es' ? 'Error al cargar datos' : 'Failed to load data');
    } finally {
      setLoading(false);
    }
  };

  const handleSaveProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    try {
      await dashboardApi.updateProfile(formData);
      toast.success(locale === 'es' ? 'Perfil actualizado' : 'Profile updated');
      if (user) {
        updateUser({
          ...user,
          name: formData.name,
          phone: formData.phone,
          languagePreference: formData.languagePreference,
          rucNumber: formData.rucNumber,
        });
      }
      onUpdate?.();
    } catch (error: any) {
      toast.error(error.message || (locale === 'es' ? 'Error al actualizar' : 'Update failed'));
    } finally {
      setSaving(false);
    }
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      toast.error(locale === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
      return;
    }
    if (passwordForm.newPassword.length < 10) {
      toast.error(
        locale === 'es'
          ? 'La contraseña debe tener al menos 10 caracteres'
          : 'Password must be at least 10 characters'
      );
      return;
    }
    setChangingPassword(true);
    try {
      await authApi.changePassword(passwordForm.currentPassword, passwordForm.newPassword);
      toast.success(locale === 'es' ? 'Contraseña actualizada' : 'Password updated');
      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
    } catch (error: any) {
      toast.error(
        error.message || (locale === 'es' ? 'Error al cambiar contraseña' : 'Failed to change password')
      );
    } finally {
      setChangingPassword(false);
    }
  };

  const handleSetPassword = async (e: React.FormEvent) => {
    e.preventDefault();
    if (newPasswordForm.password !== newPasswordForm.confirmPassword) {
      toast.error(locale === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
      return;
    }
    if (newPasswordForm.password.length < 10) {
      toast.error(
        locale === 'es'
          ? 'La contraseña debe tener al menos 10 caracteres'
          : 'Password must be at least 10 characters'
      );
      return;
    }
    setSettingPassword(true);
    try {
      await dashboardApi.setPassword(newPasswordForm.password);
      toast.success(locale === 'es' ? 'Contraseña establecida' : 'Password set');
      setNewPasswordForm({ password: '', confirmPassword: '' });
      loadData();
    } catch (error: any) {
      toast.error(
        error.message || (locale === 'es' ? 'Error al establecer contraseña' : 'Failed to set password')
      );
    } finally {
      setSettingPassword(false);
    }
  };

  const handleUnlinkGoogle = async () => {
    if (
      !confirm(
        locale === 'es'
          ? '¿Estás seguro de que quieres desvincular tu cuenta de Google?'
          : 'Are you sure you want to unlink your Google account?'
      )
    )
      return;
    try {
      await dashboardApi.unlinkGoogle();
      toast.success(locale === 'es' ? 'Google desvinculado' : 'Google unlinked');
      loadData();
    } catch (error: any) {
      toast.error(error.message || (locale === 'es' ? 'Error' : 'Failed'));
    }
  };

  const handleRevokeSession = async (sessionId: string) => {
    try {
      await dashboardApi.revokeSession(sessionId);
      setSessions((prev) => prev.filter((s) => s.id !== sessionId));
      toast.success(locale === 'es' ? 'Sesión cerrada' : 'Session revoked');
    } catch (error) {
      toast.error(locale === 'es' ? 'Error' : 'Failed');
    }
  };

  const handleRevokeAllSessions = async () => {
    if (
      !confirm(
        locale === 'es'
          ? '¿Cerrar todas las otras sesiones? Esta sesión permanecerá activa.'
          : 'Log out of all other sessions? This session stays signed in.'
      )
    )
      return;
    try {
      await dashboardApi.revokeAllSessions();
      toast.success(
        locale === 'es' ? 'Todas las otras sesiones cerradas' : 'All other sessions revoked'
      );
      loadData();
    } catch (error) {
      toast.error(locale === 'es' ? 'Error' : 'Failed');
    }
  };

  const formatDateTime = (dateStr: string) =>
    parseDate(dateStr).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'America/Asuncion',
    });

  if (loading) {
    return (
      <div className="flex justify-center py-12">
        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-yellow" />
      </div>
    );
  }

  const isActive = profile?.accountStatus === 'active';

  return (
    <div className="max-w-2xl space-y-6">
      {/* Account info */}
      <Card className="p-6">
        <h3 className="mb-4 text-lg font-semibold">
          {locale === 'es' ? 'Información de la cuenta' : 'Account information'}
        </h3>
        <div className="space-y-3 text-sm">
          <div className="flex justify-between border-b py-2">
            <span className="text-gray-600">{locale === 'es' ? 'Correo' : 'Email'}</span>
            <span className="font-medium">{profile?.email}</span>
          </div>
          <div className="flex items-center justify-between border-b py-2">
            <span className="text-gray-600">{locale === 'es' ? 'Estado' : 'Status'}</span>
            <span
              className={`inline-flex rounded-full px-3 py-1 text-xs font-medium ${
                isActive ? 'bg-green-100 text-green-800' : 'bg-amber-100 text-amber-800'
              }`}
            >
              {isActive
                ? locale === 'es'
                  ? 'Activa'
                  : 'Active'
                : profile?.accountStatus}
            </span>
          </div>
          <div className="flex justify-between py-2">
            <span className="text-gray-600">{locale === 'es' ? 'Miembro desde' : 'Member since'}</span>
            <span className="font-medium">
              {profile?.memberSince
                ? parseDate(profile.memberSince).toLocaleDateString(
                    locale === 'es' ? 'es-ES' : 'en-US',
                    { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'America/Asuncion' }
                  )
                : '-'}
            </span>
          </div>
        </div>
      </Card>

      {/* Edit profile */}
      <Card className="p-6">
        <h3 className="mb-4 text-lg font-semibold">
          {locale === 'es' ? 'Editar perfil' : 'Edit profile'}
        </h3>
        <form onSubmit={handleSaveProfile} className="space-y-4">
          <Input
            id="name"
            label={locale === 'es' ? 'Nombre' : 'Name'}
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            required
          />
          <Input
            id="phone"
            type="tel"
            label={locale === 'es' ? 'Teléfono' : 'Phone'}
            value={formData.phone}
            onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
          />
          <div>
            <label className="mb-1.5 block text-sm font-medium text-primary-dark">
              {locale === 'es' ? 'Idioma preferido' : 'Preferred language'}
            </label>
            <select
              value={formData.languagePreference}
              onChange={(e) => setFormData({ ...formData, languagePreference: e.target.value })}
              className="w-full rounded-btn border border-secondary-light-gray px-4 py-3 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-yellow"
            >
              <option value="">{locale === 'es' ? 'Seleccionar' : 'Select'}</option>
              <option value="en">English</option>
              <option value="es">Español</option>
            </select>
          </div>
          <div>
            <Input
              id="rucNumber"
              label={locale === 'es' ? 'Número de RUC (para facturas)' : 'RUC number (for invoices)'}
              value={formData.rucNumber}
              onChange={(e) => setFormData({ ...formData, rucNumber: e.target.value })}
              placeholder={locale === 'es' ? 'Opcional' : 'Optional'}
            />
            <p className="mt-1.5 text-xs text-gray-500">
              {locale === 'es'
                ? 'Tu número de RUC paraguayo para facturas fiscales'
                : 'Your Paraguayan RUC number for fiscal invoices'}
            </p>
          </div>
          <div className="pt-2">
            <Button type="submit" isLoading={saving}>
              {locale === 'es' ? 'Guardar cambios' : 'Save changes'}
            </Button>
          </div>
        </form>
        <p className="mt-4 border-t pt-4 text-xs text-gray-500">
          {locale === 'es'
            ? 'Para cambiar tu correo, contacta al soporte.'
            : 'To change your email, please contact support.'}
        </p>
      </Card>

      {/* Authentication methods */}
      <Card className="p-6">
        <h3 className="mb-4 text-lg font-semibold">
          {locale === 'es' ? 'Métodos de autenticación' : 'Authentication methods'}
        </h3>
        <div className="space-y-3">
          <div className="flex items-center justify-between rounded-card bg-secondary-gray p-3">
            <div className="flex items-center gap-3">
              <div
                className={`flex h-10 w-10 items-center justify-center rounded-full ${
                  profile?.hasPassword ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-500'
                }`}
              >
                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
              </div>
              <div>
                <p className="font-medium">{locale === 'es' ? 'Contraseña' : 'Password'}</p>
                <p className="text-sm text-gray-500">
                  {profile?.hasPassword
                    ? locale === 'es' ? 'Configurada' : 'Set'
                    : locale === 'es' ? 'No configurada' : 'Not set'}
                </p>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-between rounded-card bg-secondary-gray p-3">
            <div className="flex items-center gap-3">
              <div
                className={`flex h-10 w-10 items-center justify-center rounded-full ${
                  profile?.hasGoogleLinked ? 'bg-red-100 text-red-600' : 'bg-gray-200 text-gray-500'
                }`}
              >
                <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
                </svg>
              </div>
              <div>
                <p className="font-medium">Google</p>
                <p className="text-sm text-gray-500">
                  {profile?.hasGoogleLinked
                    ? locale === 'es' ? 'Vinculado' : 'Linked'
                    : locale === 'es' ? 'No vinculado' : 'Not linked'}
                </p>
              </div>
            </div>
            {profile?.hasGoogleLinked && profile?.hasPassword && (
              <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
                {locale === 'es' ? 'Desvincular' : 'Unlink'}
              </Button>
            )}
          </div>
        </div>
      </Card>

      {/* Password management */}
      <Card className="p-6">
        <h3 className="mb-4 text-lg font-semibold">
          {profile?.hasPassword
            ? locale === 'es' ? 'Cambiar contraseña' : 'Change password'
            : locale === 'es' ? 'Establecer contraseña' : 'Set password'}
        </h3>
        {profile?.hasPassword ? (
          <form onSubmit={handleChangePassword} className="space-y-4">
            <Input
              id="currentPassword"
              type="password"
              label={locale === 'es' ? 'Contraseña actual' : 'Current password'}
              value={passwordForm.currentPassword}
              onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
              required
            />
            <div>
              <Input
                id="newPassword"
                type="password"
                label={locale === 'es' ? 'Nueva contraseña' : 'New password'}
                value={passwordForm.newPassword}
                onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
                required
              />
              <p className="mt-1.5 text-xs text-gray-500">
                {locale === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
              </p>
            </div>
            <Input
              id="confirmPassword"
              type="password"
              label={locale === 'es' ? 'Confirmar contraseña' : 'Confirm password'}
              value={passwordForm.confirmPassword}
              onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
              required
            />
            <Button type="submit" isLoading={changingPassword}>
              {locale === 'es' ? 'Cambiar contraseña' : 'Change password'}
            </Button>
          </form>
        ) : (
          <form onSubmit={handleSetPassword} className="space-y-4">
            <p className="mb-2 text-sm text-gray-600">
              {locale === 'es'
                ? 'Actualmente inicias sesión con Google. Establece una contraseña para más opciones de acceso.'
                : 'You currently sign in with Google. Set a password for more access options.'}
            </p>
            <div>
              <Input
                id="password"
                type="password"
                label={locale === 'es' ? 'Nueva contraseña' : 'New password'}
                value={newPasswordForm.password}
                onChange={(e) => setNewPasswordForm({ ...newPasswordForm, password: e.target.value })}
                required
              />
              <p className="mt-1.5 text-xs text-gray-500">
                {locale === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
              </p>
            </div>
            <Input
              id="confirmNewPassword"
              type="password"
              label={locale === 'es' ? 'Confirmar contraseña' : 'Confirm password'}
              value={newPasswordForm.confirmPassword}
              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, confirmPassword: e.target.value })}
              required
            />
            <Button type="submit" isLoading={settingPassword}>
              {locale === 'es' ? 'Establecer contraseña' : 'Set password'}
            </Button>
          </form>
        )}
      </Card>

      {/* Active sessions */}
      <Card className="p-6">
        <div className="mb-4 flex items-center justify-between">
          <h3 className="text-lg font-semibold">
            {locale === 'es' ? 'Sesiones activas' : 'Active sessions'}
          </h3>
          {sessions.length > 1 && (
            <Button variant="outline" size="sm" onClick={handleRevokeAllSessions}>
              {locale === 'es' ? 'Cerrar todas' : 'Log out all'}
            </Button>
          )}
        </div>
        {sessions.length === 0 ? (
          <p className="text-sm text-gray-600">
            {locale === 'es' ? 'No hay sesiones activas' : 'No active sessions'}
          </p>
        ) : (
          <div className="space-y-3">
            {sessions.map((session) => (
              <div
                key={session.id}
                className="flex items-center justify-between rounded-card bg-secondary-gray p-3"
              >
                <div className="min-w-0">
                  <p className="truncate text-sm font-medium">
                    {session.userAgent
                      ? session.userAgent.substring(0, 50) + (session.userAgent.length > 50 ? '…' : '')
                      : locale === 'es' ? 'Dispositivo desconocido' : 'Unknown device'}
                  </p>
                  <p className="text-xs text-gray-500">
                    {locale === 'es' ? 'Última actividad:' : 'Last active:'}{' '}
                    {formatDateTime(session.lastActiveAt)}
                    {session.ipAddress && ` • ${session.ipAddress}`}
                  </p>
                </div>
                {session.current ? (
                  <span className="ml-3 whitespace-nowrap text-xs font-medium text-green-600">
                    {locale === 'es' ? 'Esta sesión' : 'This session'}
                  </span>
                ) : (
                  <Button variant="outline" size="sm" onClick={() => handleRevokeSession(session.id)}>
                    {locale === 'es' ? 'Cerrar' : 'Revoke'}
                  </Button>
                )}
              </div>
            ))}
          </div>
        )}
      </Card>

      {/* Danger zone */}
      <Card className="border border-red-200 bg-red-50 p-6">
        <h3 className="mb-2 text-lg font-semibold text-red-800">
          {locale === 'es' ? 'Zona de peligro' : 'Danger zone'}
        </h3>
        <p className="mb-4 text-sm text-red-700">
          {locale === 'es'
            ? 'Si deseas eliminar tu cuenta, contacta al soporte.'
            : 'If you want to delete your account, please contact support.'}
        </p>
        <Button
          variant="outline"
          size="sm"
          className="border-red-300 text-red-700 hover:bg-red-100"
          disabled
        >
          {locale === 'es' ? 'Eliminar cuenta' : 'Delete account'}
        </Button>
      </Card>
    </div>
  );
}