'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { ConfirmModal } from '@/components/ui/ConfirmModal';
import { useJiraConfig } from '@/hooks/useJiraConfig';
import { jiraConfigClient } from '@/clients/jira-config-client';

export function JiraConfigForm() {
  const {
    config,
    isLoading: configLoading,
    saveConfig,
    deleteConfig,
  } = useJiraConfig();

  const [formData, setFormData] = useState({
    enabled: false,
    baseUrl: '',
    email: '',
    apiToken: '',
    projectKey: '',
    ignoredProjects: [] as string[],
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isValidating, setIsValidating] = useState(false);
  const [validationResult, setValidationResult] = useState<{
    type: 'success' | 'error';
    text: string;
  } | null>(null);
  const [message, setMessage] = useState<{
    type: 'success' | 'error';
    text: string;
  } | null>(null);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [showForm, setShowForm] = useState(false);

  // Charger les données existantes dans le formulaire
  useEffect(() => {
    if (config) {
      setFormData({
        enabled: config.enabled || false,
        baseUrl: config.baseUrl || '',
        email: config.email || '',
        apiToken: config.apiToken || '',
        projectKey: config.projectKey || '',
        ignoredProjects: config.ignoredProjects || [],
      });
    }
  }, [config]);

  // Afficher le formulaire par défaut si Jira n'est pas configuré
  useEffect(() => {
    const isConfigured = config?.enabled && (config?.baseUrl || config?.email);
    if (!configLoading && !isConfigured) {
      setShowForm(true);
    }
  }, [config, configLoading]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setMessage(null);

    try {
      const result = await saveConfig(formData);

      if (result.success) {
        setMessage({
          type: 'success',
          text: result.message,
        });
        // Masquer le formulaire après une sauvegarde réussie
        setShowForm(false);
      } else {
        setMessage({
          type: 'error',
          text: result.message,
        });
      }
    } catch (error) {
      setMessage({
        type: 'error',
        text:
          error instanceof Error
            ? error.message
            : 'Erreur lors de la sauvegarde de la configuration',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async () => {
    setShowDeleteConfirm(true);
  };

  const confirmDelete = async () => {
    setIsSubmitting(true);
    setMessage(null);

    try {
      const result = await deleteConfig();

      if (result.success) {
        setFormData({
          enabled: false,
          baseUrl: '',
          email: '',
          apiToken: '',
          projectKey: '',
          ignoredProjects: [],
        });
        setMessage({
          type: 'success',
          text: result.message,
        });
      } else {
        setMessage({
          type: 'error',
          text: result.message,
        });
      }
    } catch (error) {
      setMessage({
        type: 'error',
        text:
          error instanceof Error
            ? error.message
            : 'Erreur lors de la suppression de la configuration',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleValidateProject = async () => {
    if (!formData.projectKey.trim()) {
      setValidationResult({
        type: 'error',
        text: 'Veuillez saisir une clé de projet',
      });
      return;
    }

    setIsValidating(true);
    setValidationResult(null);

    try {
      const result = await jiraConfigClient.validateProject(
        formData.projectKey
      );

      if (result.success && result.exists) {
        setValidationResult({
          type: 'success',
          text: `✓ Projet trouvé : ${result.projectName}`,
        });
      } else {
        setValidationResult({
          type: 'error',
          text: result.error || result.message,
        });
      }
    } catch (error) {
      setValidationResult({
        type: 'error',
        text:
          error instanceof Error
            ? error.message
            : 'Erreur lors de la validation',
      });
    } finally {
      setIsValidating(false);
    }
  };

  const isJiraConfigured =
    config?.enabled && (config?.baseUrl || config?.email);
  const isLoading = configLoading || isSubmitting;

  return (
    <div className="space-y-6">
      {/* Statut actuel */}
      <div className="flex items-center justify-between p-4 bg-[var(--card)] rounded border">
        <div>
          <h3 className="font-medium">Statut de l&apos;intégration</h3>
          <p className="text-sm text-[var(--muted-foreground)]">
            {isJiraConfigured
              ? 'Jira est configuré et prêt à être utilisé'
              : "Jira n'est pas configuré"}
          </p>
        </div>
        <div className="flex items-center gap-3">
          <Badge variant={isJiraConfigured ? 'success' : 'danger'}>
            {isJiraConfigured ? '✓ Configuré' : '✗ Non configuré'}
          </Badge>
          <Button
            variant="secondary"
            size="sm"
            onClick={() => setShowForm(!showForm)}
          >
            {showForm
              ? 'Masquer'
              : isJiraConfigured
                ? 'Modifier'
                : 'Configurer'}
          </Button>
        </div>
      </div>

      {isJiraConfigured && (
        <div className="p-4 bg-[var(--card)] rounded border">
          <h3 className="font-medium mb-2">Configuration actuelle</h3>
          <div className="space-y-2 text-sm">
            <div>
              <span className="text-[var(--muted-foreground)]">
                URL de base:
              </span>{' '}
              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
                {config?.baseUrl || 'Non définie'}
              </code>
            </div>
            <div>
              <span className="text-[var(--muted-foreground)]">Email:</span>{' '}
              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
                {config?.email || 'Non défini'}
              </code>
            </div>
            <div>
              <span className="text-[var(--muted-foreground)]">Token API:</span>{' '}
              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
                {config?.apiToken ? '••••••••' : 'Non défini'}
              </code>
            </div>
            <div>
              <span className="text-[var(--muted-foreground)]">
                Projet surveillé:
              </span>{' '}
              <code className="bg-[var(--background)] px-2 py-1 rounded text-xs">
                {config?.projectKey || 'Non défini'}
              </code>
            </div>
            <div>
              <span className="text-[var(--muted-foreground)]">
                Projets ignorés:
              </span>{' '}
              {config?.ignoredProjects && config.ignoredProjects.length > 0 ? (
                <div className="mt-1 space-x-1">
                  {config.ignoredProjects.map((project) => (
                    <code
                      key={project}
                      className="bg-[var(--background)] px-2 py-1 rounded text-xs"
                    >
                      {project}
                    </code>
                  ))}
                </div>
              ) : (
                <span className="text-xs">Aucun</span>
              )}
            </div>
          </div>
        </div>
      )}

      {/* Formulaire de configuration */}
      {showForm && (
        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Toggle d'activation */}
          <div className="flex items-center justify-between p-4 bg-[var(--muted)] rounded-lg">
            <div>
              <h4 className="font-medium">Activer l&apos;intégration Jira</h4>
              <p className="text-sm text-[var(--muted-foreground)]">
                Synchroniser les tickets Jira vers TowerControl
              </p>
            </div>
            <label className="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                checked={formData.enabled}
                onChange={(e) =>
                  setFormData((prev) => ({
                    ...prev,
                    enabled: 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>

          {formData.enabled && (
            <>
              <div>
                <label className="block text-sm font-medium mb-2">
                  URL de base Jira Cloud
                </label>
                <input
                  type="url"
                  value={formData.baseUrl}
                  onChange={(e) =>
                    setFormData((prev) => ({
                      ...prev,
                      baseUrl: e.target.value,
                    }))
                  }
                  placeholder="https://votre-domaine.atlassian.net"
                  className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
                  required
                />
                <p className="text-xs text-[var(--muted-foreground)] mt-1">
                  L&apos;URL de votre instance Jira Cloud (ex:
                  https://monentreprise.atlassian.net)
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">
                  Email Jira
                </label>
                <input
                  type="email"
                  value={formData.email}
                  onChange={(e) =>
                    setFormData((prev) => ({ ...prev, email: e.target.value }))
                  }
                  placeholder="votre-email@exemple.com"
                  className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
                  required
                />
                <p className="text-xs text-[var(--muted-foreground)] mt-1">
                  L&apos;email de votre compte Jira
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">
                  Token API Jira
                </label>
                <input
                  type="password"
                  value={formData.apiToken}
                  onChange={(e) =>
                    setFormData((prev) => ({
                      ...prev,
                      apiToken: e.target.value,
                    }))
                  }
                  placeholder="Votre token API Jira"
                  className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
                  required
                />
                <p className="text-xs text-[var(--muted-foreground)] mt-1">
                  Créez un token API depuis{' '}
                  <a
                    href="https://id.atlassian.com/manage-profile/security/api-tokens"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-[var(--primary)] hover:underline"
                  >
                    votre profil Atlassian
                  </a>
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">
                  Projet à surveiller (optionnel)
                </label>
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={formData.projectKey}
                    onChange={(e) => {
                      setFormData((prev) => ({
                        ...prev,
                        projectKey: e.target.value.trim().toUpperCase(),
                      }));
                      setValidationResult(null); // Reset validation when input changes
                    }}
                    placeholder="MYTEAM"
                    className="flex-1 px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
                  />
                  <Button
                    type="button"
                    variant="secondary"
                    onClick={handleValidateProject}
                    disabled={
                      isValidating ||
                      !formData.projectKey.trim() ||
                      !isJiraConfigured
                    }
                    className="px-4 shrink-0"
                  >
                    {isValidating ? 'Validation...' : 'Valider'}
                  </Button>
                </div>

                {/* Résultat de la validation */}
                {validationResult && (
                  <div
                    className={`mt-2 p-2 rounded text-sm ${
                      validationResult.type === 'success'
                        ? 'border border-[var(--success)]/20'
                        : 'border border-[var(--destructive)]/20'
                    }`}
                  >
                    {validationResult.text}
                  </div>
                )}

                <p className="text-xs text-[var(--muted-foreground)] mt-1">
                  Clé du projet pour les analytics d&apos;équipe (ex: MYTEAM,
                  DEV, PROD). Laissez vide pour désactiver la surveillance
                  d&apos;équipe.
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2">
                  Projets à ignorer (optionnel)
                </label>
                <input
                  type="text"
                  value={formData.ignoredProjects.join(', ')}
                  onChange={(e) => {
                    const projects = e.target.value
                      .split(',')
                      .map((p) => p.trim().toUpperCase())
                      .filter((p) => p.length > 0);
                    setFormData((prev) => ({
                      ...prev,
                      ignoredProjects: projects,
                    }));
                  }}
                  placeholder="DEMO, TEST, SANDBOX"
                  className="w-full px-3 py-2 border border-[var(--border)] rounded bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent"
                />
                <p className="text-xs text-[var(--muted-foreground)] mt-1">
                  Liste des clés de projets à ignorer lors de la
                  synchronisation, séparées par des virgules (ex: DEMO, TEST,
                  SANDBOX). Ces projets ne seront pas synchronisés vers
                  TowerControl.
                </p>
                {formData.ignoredProjects.length > 0 && (
                  <div className="mt-2 space-x-1">
                    <span className="text-xs text-[var(--muted-foreground)]">
                      Projets qui seront ignorés:
                    </span>
                    {formData.ignoredProjects.map((project) => (
                      <code
                        key={project}
                        className="bg-[var(--muted)] text-[var(--muted-foreground)] px-2 py-1 rounded text-xs"
                      >
                        {project}
                      </code>
                    ))}
                  </div>
                )}
              </div>
            </>
          )}

          <div className="flex gap-3">
            <Button type="submit" disabled={isLoading} className="flex-1">
              {isLoading ? 'Sauvegarde...' : 'Sauvegarder la configuration'}
            </Button>

            {isJiraConfigured && (
              <Button
                type="button"
                variant="secondary"
                onClick={handleDelete}
                disabled={isLoading}
                className="px-6"
              >
                Supprimer
              </Button>
            )}
          </div>

          {/* Instructions */}
          <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
            <h3 className="font-medium mb-2">
              💡 Instructions de configuration
            </h3>
            <div className="text-sm text-[var(--muted-foreground)] space-y-2">
              <p>
                <strong>1. URL de base:</strong> Votre domaine Jira Cloud (ex:
                https://monentreprise.atlassian.net)
              </p>
              <p>
                <strong>2. Email:</strong> L&apos;email de votre compte
                Jira/Atlassian
              </p>
              <p>
                <strong>3. Token API:</strong> Créez un token depuis votre
                profil Atlassian :
              </p>
              <ul className="ml-4 space-y-1 list-disc">
                <li>
                  Allez sur{' '}
                  <a
                    href="https://id.atlassian.com/manage-profile/security/api-tokens"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-[var(--primary)] hover:underline"
                  >
                    id.atlassian.com
                  </a>
                </li>
                <li>Cliquez sur &quot;Create API token&quot;</li>
                <li>Donnez un nom descriptif (ex: &quot;TowerControl&quot;)</li>
                <li>Copiez le token généré</li>
              </ul>
              <p className="mt-3 text-xs">
                <strong>Note:</strong> Les tickets Jira seront synchronisés
                comme tâches dans TowerControl pour faciliter le suivi.
              </p>
            </div>
          </div>
        </form>
      )}

      {message && (
        <div
          className="p-4 rounded border"
          style={{
            color:
              message.type === 'success'
                ? 'var(--success)'
                : 'var(--destructive)',
            backgroundColor:
              message.type === 'success'
                ? 'color-mix(in srgb, var(--success) 10%, transparent)'
                : 'color-mix(in srgb, var(--destructive) 10%, transparent)',
            borderColor:
              message.type === 'success'
                ? 'color-mix(in srgb, var(--success) 20%, var(--border))'
                : 'color-mix(in srgb, var(--destructive) 20%, var(--border))',
          }}
        >
          {message.text}
        </div>
      )}

      <ConfirmModal
        isOpen={showDeleteConfirm}
        onClose={() => setShowDeleteConfirm(false)}
        onConfirm={confirmDelete}
        title="Supprimer la configuration Jira"
        message="Êtes-vous sûr de vouloir supprimer la configuration Jira ?"
        confirmText="Supprimer"
        cancelText="Annuler"
        variant="destructive"
        isLoading={isSubmitting}
      />
    </div>
  );
}
