import Link from "next/link";
import { ArrowLeft, Paperclip, Send } from "@/components/ui/icons";
import { Topbar } from "@/components/shell/topbar";
import { Panel } from "@/components/ui/panel";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { TICKET_CATEGORY_LABELS, currentSites, type TicketCategory } from "@/lib/mock-data";

const CATEGORIES: TicketCategory[] = ["technique", "facturation", "evolution", "autre"];

export default function NewTicketPage() {
  return (
    <>
      <Topbar
        title="Nouvelle demande"
        subtitle="Notre équipe vous répond rapidement"
      />

      <div className="pt-6 max-w-3xl">
        <Link
          href="/portail/support"
          className="inline-flex items-center gap-1.5 text-xs text-text-muted hover:text-accent transition-colors mb-4"
        >
          <ArrowLeft className="size-3.5" />
          Retour à la liste
        </Link>

        <Panel>
          <form className="px-6 py-6 space-y-5">
            <Field id="subject" label="Sujet de la demande" required>
              <Input type="text" placeholder="Ex. Ajouter une page de tarifs" />
            </Field>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              <Field id="category" label="Catégorie" required>
                <Select>
                  {CATEGORIES.map((c) => (
                    <option key={c} value={c}>{TICKET_CATEGORY_LABELS[c]}</option>
                  ))}
                </Select>
              </Field>

              <Field id="site" label="Site concerné" hint="Optionnel, pour les demandes spécifiques à un site">
                <Select>
                  <option value="">Tous mes sites</option>
                  {currentSites.map((s) => (
                    <option key={s.id} value={s.id}>{s.label} · {s.domain}</option>
                  ))}
                </Select>
              </Field>
            </div>

            <Field id="message" label="Décrivez votre demande" required hint="Plus c'est précis, plus on peut être efficace.">
              <Textarea rows={8} placeholder="Bonjour, je souhaite…" />
            </Field>

            <button
              type="button"
              className="inline-flex items-center gap-1.5 text-xs text-text-muted hover:text-accent transition-colors"
            >
              <Paperclip className="size-3.5" />
              Joindre un fichier (capture, PDF…)
            </button>
          </form>

          <div className="px-6 py-4 border-t border-border bg-stone-900/[0.02] flex items-center justify-between gap-3">
            <span className="text-xs text-text-dim">
              Vous serez notifié par email dès qu'un membre de l'équipe répond.
            </span>
            <div className="flex items-center gap-2">
              <Link href="/portail/support">
                <Button variant="ghost" size="sm">Annuler</Button>
              </Link>
              <Button variant="primary" size="sm">
                <Send className="size-3.5" />
                Envoyer la demande
              </Button>
            </div>
          </div>
        </Panel>
      </div>
    </>
  );
}