"use client";
import { useState } from "react";
import { useAuth } from "@/contexts/AuthContext";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
import Button from "@/components/Button";
import { useRouter } from "next/navigation";
import { ROUTES } from "@/utils/constants";

export default function TestTicketsPage() {
  const { user, isAuthenticated } = useAuth();
  const router = useRouter();
  const [testCode, setTestCode] = useState("");

  const generateTestCode = () => {
    const code = `TTP${Date.now().toString().slice(-7)}`;
    setTestCode(code);
    return code;
  };

  const scenarios = [
    {
      title: "Scénario 1 : Nouveau ticket",
      description: "Génère un nouveau code unique que vous pouvez utiliser",
      action: "Générer un code",
      buttonVariant: "primary" as const,
      onClick: () => {
        const code = generateTestCode();
        alert(`Code généré : ${code}\n\nCopiez ce code et utilisez-le sur la page /jeux`);
      }
    },
    {
      title: "Scénario 2 : Vérifier mes tickets",
      description: "Voir tous vos tickets déjà utilisés",
      action: "Aller sur Mes lots",
      buttonVariant: "outline" as const,
      onClick: () => router.push(ROUTES.MY_LOTS)
    },
    {
      title: "Scénario 3 : Diagnostic",
      description: "Tester l'API et voir les détails techniques",
      action: "Ouvrir le diagnostic",
      buttonVariant: "outline" as const,
      onClick: () => router.push('/mes-lots/debug')
    },
  ];

  if (!isAuthenticated) {
    return (
      <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center">
        <Card className="max-w-md text-center">
          <CardContent className="py-8">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              Connexion requise
            </h2>
            <p className="text-gray-600 mb-6">
              Vous devez être connecté pour accéder à cette page
            </p>
            <Button onClick={() => router.push(ROUTES.LOGIN)}>
              Se connecter
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="py-8">
      <div className="max-w-4xl mx-auto">
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>🧪 Page de test - Tickets</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="p-4 bg-blue-50 rounded border border-blue-200 mb-6">
              <p className="text-sm text-blue-800">
                <strong>👤 Connecté en tant que :</strong> {user?.firstName} {user?.lastName} ({user?.email})
              </p>
              <p className="text-sm text-blue-800">
                <strong>🎭 Rôle :</strong> {user?.role}
              </p>
            </div>

            {testCode && (
              <div className="p-4 bg-green-50 rounded border border-green-200 mb-6">
                <p className="text-sm text-green-800 mb-2">
                  <strong>✅ Code généré :</strong>
                </p>
                <div className="flex items-center gap-3">
                  <code className="text-2xl font-mono font-bold bg-white px-4 py-2 rounded border-2 border-green-300">
                    {testCode}
                  </code>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      navigator.clipboard.writeText(testCode);
                      alert('Code copié !');
                    }}
                  >
                    📋 Copier
                  </Button>
                  <Button
                    size="sm"
                    onClick={() => router.push(ROUTES.GAME)}
                  >
                    → Aller jouer
                  </Button>
                </div>
              </div>
            )}

            <div className="space-y-4">
              {scenarios.map((scenario, index) => (
                <Card key={index}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <h3 className="font-semibold text-lg mb-2">
                          {scenario.title}
                        </h3>
                        <p className="text-sm text-gray-600 mb-3">
                          {scenario.description}
                        </p>
                      </div>
                      <Button
                        variant={scenario.buttonVariant}
                        onClick={scenario.onClick}
                      >
                        {scenario.action}
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            <div className="mt-6 p-4 bg-yellow-50 rounded border border-yellow-200">
              <h3 className="font-semibold mb-2">⚠️ Important :</h3>
              <ul className="text-sm space-y-1 list-disc list-inside text-yellow-800">
                <li>Les codes générés ici sont des codes de TEST</li>
                <li>Ils ne seront valides QUE si votre backend accepte de créer des tickets à la volée</li>
                <li>Si le backend vérifie que le code existe en base, créez d'abord des tickets via SQL</li>
                <li>Consultez le fichier <code className="bg-yellow-100 px-1">docs/create-test-tickets.sql</code></li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}