la-voix-du-peuple/artifacts/voix-du-peuple/src/pages/home.tsx

import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { format } from "date-fns";
import { fr } from "date-fns/locale";
import { useQueryClient } from "@tanstack/react-query";
import {
  useSubmitIdea,
  useListIdeas,
  useGetIdeaStats,
  useGetSynthesis,
  getListIdeasQueryKey,
  getGetIdeaStatsQueryKey,
} from "@workspace/api-client-react";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Loader2, PenTool, CheckCircle2, Info, AlertCircle, TrendingUp, Users, Scale,
  Share2, Printer, Copy,
} from "lucide-react";
import { useToast } from "@/hooks/use-toast";

const submitIdeaSchema = z.object({
  content: z.string()
    .min(10, "Votre contribution doit faire au moins 10 caractères.")
    .max(1000, "Merci de rester sous 1 000 caractères."),
  author: z.string().max(100).optional(),
});

type SubmitIdeaValues = z.infer<typeof submitIdeaSchema>;

const VALEURS = [
  {
    source: "DUDH — Art. 1 (ONU, 1948)",
    texte: "Tous les êtres humains naissent libres et égaux en dignité et en droits.",
  },
  {
    source: "DUDH — Art. 19",
    texte: "Tout individu a droit à la liberté d'opinion et d'expression.",
  },
  {
    source: "DUDH — Art. 20",
    texte: "Tout appel à la haine nationale, raciale ou religieuse constituant une incitation à la discrimination, à l'hostilité ou à la violence est interdit par la loi.",
  },
  {
    source: "PIDCP — Art. 20 (ONU, 1966)",
    texte: "Tout appel à la haine nationale, raciale ou religieuse qui constitue une incitation à la discrimination, à l'hostilité ou à la violence est interdit par la loi.",
  },
  {
    source: "CEDH — Art. 10 (Conseil de l'Europe, 1950)",
    texte: "Toute personne a droit à la liberté d'expression, sous réserve des restrictions nécessaires à la protection des droits d'autrui.",
  },
  {
    source: "CEDH — Art. 17",
    texte: "Aucune disposition de la Convention ne peut être interprétée comme impliquant le droit de se livrer à une activité visant à la destruction des droits reconnus.",
  },
  {
    source: "Charte des droits fondamentaux de l'UE — Art. 1 (2000)",
    texte: "La dignité humaine est inviolable. Elle doit être respectée et protégée.",
  },
];

export default function Home() {
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const [submitResult, setSubmitResult] = React.useState<{
    success: boolean;
    message: string;
    reason?: string;
  } | null>(null);

  const submitIdea = useSubmitIdea();
  const { data: ideas, isLoading: isLoadingIdeas } = useListIdeas();
  const { data: stats } = useGetIdeaStats();
  const { data: synthesis, isLoading: isLoadingSynthesis } = useGetSynthesis({
    query: { refetchInterval: 15000 },
  });

  const handleShare = () => {
    if (!synthesis?.text) return;
    const date = format(new Date(), "d MMMM yyyy 'à' HH:mm", { locale: fr });
    const nb = synthesis.ideaCount ?? 0;
    const shareText = `La Voix du Peuple — Synthèse citoyenne\nGénérée le ${date}\n\n${synthesis.text}\n\n(${nb} contribution${nb !== 1 ? "s" : ""} intégrée${nb !== 1 ? "s" : ""})\n\nhttps://lavoixdupeuple.fr`;
    if (navigator.share) {
      navigator.share({ title: "La Voix du Peuple — Synthèse", text: shareText });
    } else {
      navigator.clipboard.writeText(shareText).then(() => {
        toast({ description: "Texte copié dans le presse-papier ✓" });
      });
    }
  };

  const handlePrint = () => {
    if (!synthesis?.text) return;
    const date = format(new Date(), "d MMMM yyyy 'à' HH:mm", { locale: fr });
    const nb = synthesis.ideaCount ?? 0;
    const safe = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    const html = `<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>La Voix du Peuple — Synthèse</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', 'Segoe UI', sans-serif; max-width: 680px; margin: 48px auto; color: #1a1a2e; line-height: 1.75; padding: 0 24px; }
    .tricolor { display: flex; height: 4px; width: 80px; margin-bottom: 32px; border-radius: 2px; overflow: hidden; }
    .tricolor span:nth-child(1) { flex: 1; background: #002395; }
    .tricolor span:nth-child(2) { flex: 1; background: #EDEDED; }
    .tricolor span:nth-child(3) { flex: 1; background: #ED2939; }
    h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; color: #1a1a2e; }
    .meta { font-size: 0.72rem; color: #888; font-family: monospace; margin-bottom: 36px; }
    .text { font-size: 1rem; white-space: pre-line; color: #1a1a2e; }
    .footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid #eee; font-size: 0.7rem; color: #bbb; font-family: monospace; display: flex; justify-content: space-between; }
    @media print { body { margin: 32px auto; } }
  </style>
</head>
<body>
  <div class="tricolor"><span></span><span></span><span></span></div>
  <h1>La Voix du Peuple — Synthèse citoyenne</h1>
  <div class="meta">Générée le ${safe(date)} &nbsp;·&nbsp; ${nb} contribution${nb !== 1 ? "s" : ""} intégrée${nb !== 1 ? "s" : ""}</div>
  <div class="text">${safe(synthesis.text)}</div>
  <div class="footer">
    <span>lavoixdupeuple.fr</span>
    <span>Document généré automatiquement — modération selon DUDH / PIDCP / CEDH</span>
  </div>
</body>
</html>`;
    const w = window.open("", "_blank");
    if (w) {
      w.document.write(html);
      w.document.close();
      w.onload = () => w.print();
    }
  };

  const form = useForm<SubmitIdeaValues>({
    resolver: zodResolver(submitIdeaSchema),
    defaultValues: { content: "", author: "" },
  });

  const onSubmit = (data: SubmitIdeaValues) => {
    setSubmitResult(null);
    submitIdea.mutate({ data }, {
      onSuccess: (result) => {
        if (result.accepted) {
          setSubmitResult({
            success: true,
            message: "Votre contribution a été ajoutée à la synthèse.",
          });
          form.reset();
        } else {
          setSubmitResult({
            success: false,
            message: "Cette contribution n'a pas pu être intégrée : elle n'est pas compatible avec le cadre de modération de cette plateforme.",
            reason: result.reason ?? undefined,
          });
        }
        queryClient.invalidateQueries({ queryKey: getListIdeasQueryKey() });
        queryClient.invalidateQueries({ queryKey: getGetIdeaStatsQueryKey() });
      },
      onError: () => {
        setSubmitResult({
          success: false,
          message: "Une erreur est survenue lors de l'envoi. Veuillez réessayer.",
        });
      },
    });
  };

  return (
    <>
    {/* Bandeau d'introduction */}
    <div className="border-b border-border/40 bg-muted/30 px-6 md:px-10 py-5">
      <p className="text-sm text-foreground/75 max-w-3xl leading-relaxed">
        <span className="font-semibold text-foreground">La Voix du Peuple</span> recueille vos propositions et les synthétise en un résumé clair, destiné à être transmis à vos élus.
        Exprimez-vous librement — chaque contribution est modérée selon le droit international des droits humains, puis intégrée au résumé collectif affiché à droite.
      </p>
    </div>

    <div className="flex-1 grid md:grid-cols-2 lg:grid-cols-[1fr_1.2fr] h-[calc(100vh-5rem)]">
      {/* Colonne gauche : formulaire + fil des idées */}
      <div className="flex flex-col border-r border-border/40 bg-card">
        <div className="p-6 md:p-8 flex flex-col gap-6 flex-shrink-0 border-b border-border/40">
          <div className="space-y-2">
            <h1 className="text-3xl font-serif font-bold text-primary tracking-tight">
              Vos propositions
            </h1>
            <p className="text-muted-foreground text-sm">
              Quelle mesure souhaiteriez-vous voir portée par vos représentants ?
            </p>
          </div>

          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <FormField
                control={form.control}
                name="content"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="sr-only">Votre idée</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="Quelle proposition souhaitez-vous faire remonter ?"
                        className="min-h-[120px] resize-none font-serif text-lg bg-background border-primary/20 focus-visible:ring-primary placeholder:text-muted-foreground/50"
                        data-testid="input-idea-content"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div className="flex items-start gap-4">
                <FormField
                  control={form.control}
                  name="author"
                  render={({ field }) => (
                    <FormItem className="flex-1">
                      <FormLabel className="sr-only">Pseudonyme (optionnel)</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Pseudonyme (optionnel)"
                          className="bg-background border-primary/20 focus-visible:ring-primary font-mono text-sm"
                          data-testid="input-idea-author"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button
                  type="submit"
                  className="font-bold tracking-wide flex-shrink-0"
                  disabled={submitIdea.isPending}
                  data-testid="button-submit-idea"
                >
                  {submitIdea.isPending ? (
                    <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Envoi…</>
                  ) : (
                    <><PenTool className="mr-2 h-4 w-4" /> Contribuer</>
                  )}
                </Button>
              </div>
            </form>
          </Form>

          {submitResult && (
            <Alert
              variant={submitResult.success ? "default" : "default"}
              className={`mt-2 ${submitResult.success ? "" : "border-amber-300 bg-amber-50 text-amber-900"}`}
              data-testid={`alert-submit-${submitResult.success ? "success" : "info"}`}
            >
              {submitResult.success
                ? <CheckCircle2 className="h-4 w-4 text-green-600" />
                : <Info className="h-4 w-4 text-amber-600" />
              }
              <AlertTitle>
                {submitResult.success ? "Contribution enregistrée" : "Contribution non retenue"}
              </AlertTitle>
              <AlertDescription>
                {submitResult.message}
                {submitResult.reason && !submitResult.success && (
                  <div className="mt-2 text-sm italic border-l-2 pl-2 py-1 border-amber-400 opacity-90">
                    {submitResult.reason}
                  </div>
                )}
              </AlertDescription>
            </Alert>
          )}

          {/* Encart valeurs */}
          <Accordion type="single" collapsible className="border border-border/40 rounded-sm px-3">
            <AccordionItem value="valeurs" className="border-none">
              <AccordionTrigger className="text-xs font-mono uppercase tracking-widest text-muted-foreground hover:no-underline py-3">
                <span className="flex items-center gap-2">
                  <Scale className="h-3 w-3" /> Cadre de modération
                </span>
              </AccordionTrigger>
              <AccordionContent>
                <p className="text-xs text-muted-foreground mb-4 leading-relaxed">
                  Les contributions sont modérées selon les textes fondamentaux du droit
                  international des droits humains. Les contenus contraires à ces principes
                  ne sont pas intégrés.
                </p>
                <div className="space-y-3">
                  {VALEURS.map((v) => (
                    <div key={v.source} className="border-l-2 border-primary/30 pl-3">
                      <p className="text-xs font-mono font-semibold text-primary/80 mb-0.5">{v.source}</p>
                      <p className="text-xs font-serif text-foreground/80 leading-relaxed italic">« {v.texte} »</p>
                    </div>
                  ))}
                </div>
                <p className="text-xs text-muted-foreground font-mono mt-4">
                  Sources : DUDH (ONU 1948) · PIDCP (ONU 1966) · CEDH (Conseil de l'Europe 1950) ·
                  Charte des droits fondamentaux de l'UE (2000) · Statut de Rome / CPI (1998) ·
                  CERD (ONU 1965)
                </p>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>

        {/* Fil des proclamations acceptées */}
        <ScrollArea className="flex-1 bg-muted/30">
          <div className="p-6 md:p-8">
            <h2 className="text-xs font-mono font-bold uppercase tracking-widest text-muted-foreground mb-6 flex items-center gap-2">
              <TrendingUp className="h-3 w-3" /> Contributions récentes
            </h2>

            <div className="space-y-8">
              {isLoadingIdeas ? (
                <div className="flex justify-center p-8 text-muted-foreground">
                  <Loader2 className="h-6 w-6 animate-spin" />
                </div>
              ) : ideas && ideas.length > 0 ? (
                ideas.slice(0, 20).map((idea) => (
                  <div
                    key={idea.id}
                    className="group relative pl-4 border-l border-border/60 hover:border-primary/50 transition-colors"
                    data-testid={`card-idea-${idea.id}`}
                  >
                    <p className="text-foreground/90 font-serif leading-relaxed">
                      {idea.content}
                    </p>
                    <div className="mt-2 flex items-center gap-3 text-xs font-mono text-muted-foreground">
                      <span className="font-semibold text-primary/70">
                        {idea.author || "Citoyen anonyme"}
                      </span>
                      <span>&bull;</span>
                      <span>
                        {format(new Date(idea.createdAt), "d MMM, HH:mm", { locale: fr })}
                      </span>
                    </div>
                  </div>
                ))
              ) : (
                <div className="text-center p-8 text-muted-foreground text-sm border border-dashed border-border/60">
                  Aucune contribution enregistrée pour l'instant.
                </div>
              )}
            </div>
          </div>
        </ScrollArea>
      </div>

      {/* Colonne droite : synthèse vivante */}
      <div className="flex flex-col bg-[#F9F7F1] relative overflow-hidden">
        <div
          className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-multiply"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
          }}
        />

        {/* En-tête fixe */}
        <div className="flex justify-between items-start px-6 md:px-10 py-5 border-b border-border/30 relative z-10 flex-shrink-0 gap-3">
          <div className="min-w-0">
            <h2 className="text-xs font-mono font-bold uppercase tracking-widest text-primary flex items-center gap-2">
              <Users className="h-3.5 w-3.5" /> Synthèse des contributions
            </h2>
            <p className="text-xs text-muted-foreground mt-0.5">
              Mise à jour à chaque nouvelle contribution
            </p>
          </div>
          <div className="flex items-center gap-2 flex-shrink-0">
            {stats && (
              <div className="text-xs font-mono text-right mr-2" data-testid="text-stats">
                <span className="text-muted-foreground">Intégrées </span>
                <span className="font-bold text-primary">{stats.accepted}</span>
              </div>
            )}
            <Button
              variant="ghost"
              size="sm"
              className="h-7 px-2 text-xs gap-1.5 text-muted-foreground hover:text-foreground"
              onClick={handleShare}
              disabled={!synthesis?.text}
              title="Partager ou copier la synthèse"
            >
              {navigator.share ? (
                <><Share2 className="h-3.5 w-3.5" /> Partager</>
              ) : (
                <><Copy className="h-3.5 w-3.5" /> Copier</>
              )}
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="h-7 px-2 text-xs gap-1.5 text-muted-foreground hover:text-foreground"
              onClick={handlePrint}
              disabled={!synthesis?.text}
              title="Exporter en PDF / imprimer"
            >
              <Printer className="h-3.5 w-3.5" /> PDF
            </Button>
          </div>
        </div>

        {/* Texte défilable */}
        <ScrollArea className="flex-1 relative z-10">
          <div className="px-6 md:px-10 py-8">
            {isLoadingSynthesis ? (
              <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
                <Loader2 className="h-6 w-6 animate-spin text-primary" />
                <span className="font-mono text-xs uppercase tracking-widest">Chargement…</span>
              </div>
            ) : synthesis?.text ? (
              <div
                className="animate-in fade-in slide-in-from-bottom-2 duration-700 ease-out text-sm md:text-base leading-relaxed text-foreground space-y-4 whitespace-pre-line"
                data-testid="text-synthesis-content"
              >
                {synthesis.text}
              </div>
            ) : synthesis ? (
              <p className="text-muted-foreground italic text-sm py-16 text-center">
                Aucune contribution pour l'instant.
              </p>
            ) : (
              <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
                <AlertCircle className="h-6 w-6 text-destructive" />
                <span className="font-mono text-xs uppercase tracking-widest">Impossible de récupérer la synthèse</span>
              </div>
            )}
          </div>
        </ScrollArea>

        {/* Pied de page fixe */}
        {synthesis?.updatedAt && (
          <div
            className="flex justify-between items-center px-6 md:px-10 py-3 border-t border-border/30 text-xs font-mono text-muted-foreground relative z-10 flex-shrink-0"
            data-testid="text-synthesis-meta"
          >
            <span>Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}</span>
            <span className="flex items-center gap-1.5">
              <span className="relative flex h-1.5 w-1.5">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
              </span>
              {format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })}
            </span>
          </div>
        )}
      </div>
    </div>
    </>
  );
}