'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { AppConfig } from '@/lib/config';

interface JiraConfigFormProps {
  config: AppConfig;
}

export function JiraConfigForm({ config }: JiraConfigFormProps) {
  const [formData, setFormData] = useState({
    baseUrl: '',
    email: '',
    apiToken: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);

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

    try {
      // Note: Dans un vrai environnement, ces variables seraient configurées côté serveur
      // Pour cette démo, on affiche juste un message informatif
      setMessage({
        type: 'success',
        text: 'Configuration sauvegardée. Redémarrez l\'application pour appliquer les changements.'
      });
    } catch (error) {
      setMessage({
        type: 'error',
        text: 'Erreur lors de la sauvegarde de la configuration'
      });
    } finally {
      setIsLoading(false);
    }
  };

  const isJiraConfigured = config.integrations.jira.enabled;

  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'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>
        <Badge variant={isJiraConfigured ? 'success' : 'danger'}>
          {isJiraConfigured ? '✓ Configuré' : '✗ Non configuré'}
        </Badge>
      </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.integrations.jira.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.integrations.jira.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.integrations.jira.apiToken ? '••••••••' : 'Non défini'}
              </code>
            </div>
          </div>
        </div>
      )}

      {/* Formulaire de configuration */}
      <form onSubmit={handleSubmit} className="space-y-4">
        <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'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'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>

        <Button
          type="submit"
          disabled={isLoading}
          className="w-full"
        >
          {isLoading ? 'Sauvegarde...' : 'Sauvegarder la configuration'}
        </Button>
      </form>

      {message && (
        <div className={`p-4 rounded border ${
          message.type === 'success' 
            ? 'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200'
            : 'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200'
        }`}>
          {message.text}
        </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'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 "Create API token"</li>
            <li>Donnez un nom descriptif (ex: "TowerControl")</li>
            <li>Copiez le token généré</li>
          </ul>
          <p className="mt-3 text-xs">
            <strong>Note:</strong> Ces variables doivent être configurées dans l'environnement du serveur (JIRA_BASE_URL, JIRA_EMAIL, JIRA_API_TOKEN)
          </p>
        </div>
      </div>
    </div>
  );
}