"use client";

import React, { useState } from "react";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import {
  MessageCircle,
  Phone,
  Mail,
  Clock,
  CheckCircle,
  AlertCircle,
  Send,
  ArrowLeft,
  Headphones,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";

/**
 * Page de support technique
 * Formulaire de contact et informations de support
 */
export default function SupportPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    nom: "",
    email: "",
    sujet: "",
    priorite: "normale",
    message: "",
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
  ) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

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

    // Simuler l'envoi
    await new Promise((resolve) => setTimeout(resolve, 1500));

    alert("Ticket de support créé avec succès ! Notre équipe vous contactera bientôt.");
    router.push("/aide");
  };

  const ticketsRecents = [
    {
      id: "#2024-1234",
      sujet: "Problème d'accès au dashboard",
      status: "resolved",
      date: "2025-10-28",
    },
    {
      id: "#2024-1189",
      sujet: "Question sur la facturation",
      status: "in-progress",
      date: "2025-10-25",
    },
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "resolved":
        return (
          <Badge className="bg-green-100 text-green-800">
            <CheckCircle className="h-3 w-3 mr-1" />
            Résolu
          </Badge>
        );
      case "in-progress":
        return (
          <Badge className="bg-blue-100 text-blue-800">
            <Clock className="h-3 w-3 mr-1" />
            En cours
          </Badge>
        );
      default:
        return <Badge>Nouveau</Badge>;
    }
  };

  return (
    <div className="space-y-6 p-6">
      {/* En-tête */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link href="/aide">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Retour à l'aide
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Support technique</h1>
            <p className="text-gray-500 mt-1">
              Contactez notre équipe d'assistance
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Formulaire de contact */}
        <div className="lg:col-span-2 space-y-6">
          <Card className="p-6">
            <h2 className="text-xl font-semibold mb-6">Créer un ticket de support</h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="nom">Nom complet *</Label>
                  <Input
                    id="nom"
                    name="nom"
                    type="text"
                    placeholder="Votre nom"
                    value={formData.nom}
                    onChange={handleChange}
                    required
                    className="mt-2"
                  />
                </div>
                <div>
                  <Label htmlFor="email">Email *</Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    placeholder="votre@email.com"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    className="mt-2"
                  />
                </div>
              </div>

              <div>
                <Label htmlFor="sujet">Sujet *</Label>
                <Input
                  id="sujet"
                  name="sujet"
                  type="text"
                  placeholder="Résumé de votre demande"
                  value={formData.sujet}
                  onChange={handleChange}
                  required
                  className="mt-2"
                />
              </div>

              <div>
                <Label htmlFor="priorite">Priorité</Label>
                <select
                  id="priorite"
                  name="priorite"
                  value={formData.priorite}
                  onChange={handleChange}
                  className="mt-2 w-full border border-gray-300 rounded-md p-2"
                >
                  <option value="basse">Basse</option>
                  <option value="normale">Normale</option>
                  <option value="haute">Haute</option>
                  <option value="urgente">Urgente</option>
                </select>
              </div>

              <div>
                <Label htmlFor="message">Description du problème *</Label>
                <Textarea
                  id="message"
                  name="message"
                  placeholder="Décrivez votre problème en détail..."
                  value={formData.message}
                  onChange={handleChange}
                  required
                  rows={8}
                  className="mt-2"
                />
              </div>

              <Button
                type="submit"
                className="w-full bg-blue-600 hover:bg-blue-700"
                disabled={isSubmitting}
              >
                <Send className="mr-2 h-4 w-4" />
                {isSubmitting ? "Envoi en cours..." : "Envoyer le ticket"}
              </Button>
            </form>
          </Card>

          {/* Tickets récents */}
          {ticketsRecents.length > 0 && (
            <Card className="p-6">
              <h2 className="text-xl font-semibold mb-4">Vos tickets récents</h2>
              <div className="space-y-3">
                {ticketsRecents.map((ticket) => (
                  <div
                    key={ticket.id}
                    className="flex items-center justify-between p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer"
                  >
                    <div className="flex-1">
                      <div className="flex items-center gap-3">
                        <span className="font-mono text-sm text-gray-600">
                          {ticket.id}
                        </span>
                        {getStatusBadge(ticket.status)}
                      </div>
                      <p className="font-medium mt-1">{ticket.sujet}</p>
                      <p className="text-sm text-gray-500">
                        Créé le{" "}
                        {new Date(ticket.date).toLocaleDateString("fr-FR", {
                          day: "2-digit",
                          month: "long",
                          year: "numeric",
                        })}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          )}
        </div>

        {/* Sidebar - Informations de contact */}
        <div className="space-y-6">
          {/* Horaires de support */}
          <Card className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-3 bg-blue-100 rounded-lg">
                <Headphones className="h-6 w-6 text-blue-600" />
              </div>
              <div>
                <h3 className="font-semibold">Support disponible</h3>
                <p className="text-sm text-gray-600">Lundi - Vendredi</p>
              </div>
            </div>
            <div className="space-y-3 text-sm">
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-gray-400" />
                <span>9h00 - 18h00 (CET)</span>
              </div>
              <p className="text-xs text-gray-500">
                Temps de réponse moyen : 2-4 heures pendant les horaires d'ouverture
              </p>
            </div>
          </Card>

          {/* Contact téléphonique */}
          <Card className="p-6 bg-blue-50 border-blue-200">
            <div className="flex items-start gap-3">
              <div className="p-3 bg-blue-600 rounded-lg">
                <Phone className="h-5 w-5 text-white" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-blue-900 mb-1">
                  Support téléphonique
                </h3>
                <p className="text-sm text-blue-700 mb-2">
                  Pour une assistance immédiate
                </p>
                <Button
                  variant="default"
                  size="sm"
                  className="bg-blue-600 hover:bg-blue-700 w-full"
                >
                  +33 1 23 45 67 89
                </Button>
              </div>
            </div>
          </Card>

          {/* Contact email */}
          <Card className="p-6 bg-green-50 border-green-200">
            <div className="flex items-start gap-3">
              <div className="p-3 bg-green-600 rounded-lg">
                <Mail className="h-5 w-5 text-white" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-green-900 mb-1">Email support</h3>
                <p className="text-sm text-green-700 mb-2">Réponse sous 24h</p>
                <Button
                  variant="default"
                  size="sm"
                  className="bg-green-600 hover:bg-green-700 w-full"
                >
                  support@btpxpress.fr
                </Button>
              </div>
            </div>
          </Card>

          {/* Chat en direct */}
          <Card className="p-6 bg-purple-50 border-purple-200">
            <div className="flex items-start gap-3">
              <div className="p-3 bg-purple-600 rounded-lg">
                <MessageCircle className="h-5 w-5 text-white" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-purple-900 mb-1">
                  Chat en direct
                </h3>
                <p className="text-sm text-purple-700 mb-2">
                  Discutez avec un agent
                </p>
                <Button
                  variant="default"
                  size="sm"
                  className="bg-purple-600 hover:bg-purple-700 w-full"
                >
                  Démarrer le chat
                </Button>
              </div>
            </div>
          </Card>

          {/* Note importante */}
          <Card className="p-4 bg-yellow-50 border-yellow-200">
            <div className="flex items-start gap-2">
              <AlertCircle className="h-5 w-5 text-yellow-600 flex-shrink-0 mt-0.5" />
              <div className="flex-1">
                <p className="text-sm text-yellow-800">
                  Pour les urgences critiques affectant votre production, appelez
                  notre ligne d'urgence 24/7 au{" "}
                  <span className="font-semibold">+33 1 98 76 54 32</span>
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}