import Link from "next/link";
import { salvarPerguntaAction } from "@/app/(admin)/admin/actions";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { listarPerguntasAdmin } from "@/lib/admin-service";

export default async function PerguntasAdminPage() {
  const secoes = await listarPerguntasAdmin();

  return (
    <main className="container py-8">
      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-3xl font-semibold">Perguntas e ajudas</h1>
          <p className="mt-2 text-sm text-muted-foreground">
            Edite textos do briefing sem alterar codigo.
          </p>
        </div>
        <Button asChild variant="outline">
          <Link href="/admin">Voltar</Link>
        </Button>
      </div>

      <div className="space-y-6">
        {secoes.map((secao) => (
          <Card key={secao.id}>
            <CardHeader>
              <CardTitle>{secao.ordem}. {secao.titulo}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {secao.perguntas.map((pergunta) => (
                <form key={pergunta.id} action={salvarPerguntaAction} className="space-y-4 rounded-lg border p-4">
                  <input type="hidden" name="perguntaId" value={pergunta.id} />
                  <div className="flex flex-wrap items-center gap-2">
                    <Badge variant="muted">{pergunta.tipo}</Badge>
                    {!pergunta.ativo ? <Badge variant="outline">Inativa</Badge> : null}
                  </div>
                  <div className="grid gap-4 md:grid-cols-[100px_1fr]">
                    <div className="space-y-2">
                      <Label htmlFor={`ordem-${pergunta.id}`}>Ordem</Label>
                      <Input id={`ordem-${pergunta.id}`} name="ordem" type="number" defaultValue={pergunta.ordem} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor={`rotulo-${pergunta.id}`}>Rotulo</Label>
                      <Input id={`rotulo-${pergunta.id}`} name="rotulo" defaultValue={pergunta.rotulo} />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor={`dica-${pergunta.id}`}>Dica</Label>
                    <Input id={`dica-${pergunta.id}`} name="dica" defaultValue={pergunta.dica ?? ""} />
                  </div>
                  <div className="grid gap-3 sm:grid-cols-2">
                    <label className="flex items-center gap-3 rounded-md border p-3 text-sm">
                      <Checkbox name="ativo" defaultChecked={pergunta.ativo} />
                      Ativa
                    </label>
                    <label className="flex items-center gap-3 rounded-md border p-3 text-sm">
                      <Checkbox name="obrigatoria" defaultChecked={pergunta.obrigatoria} />
                      Obrigatoria
                    </label>
                  </div>
                  <div className="grid gap-4 md:grid-cols-3">
                    <div className="space-y-2">
                      <Label htmlFor={`oq-${pergunta.id}`}>O que responder</Label>
                      <Textarea id={`oq-${pergunta.id}`} name="oQueResponder" defaultValue={pergunta.ajuda?.oQueResponder ?? ""} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor={`pq-${pergunta.id}`}>Por que perguntamos</Label>
                      <Textarea id={`pq-${pergunta.id}`} name="porQuePerguntamos" defaultValue={pergunta.ajuda?.porQuePerguntamos ?? ""} />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor={`ex-${pergunta.id}`}>Mini exemplo</Label>
                      <Textarea id={`ex-${pergunta.id}`} name="miniExemplo" defaultValue={pergunta.ajuda?.miniExemplo ?? ""} />
                    </div>
                  </div>
                  <Button type="submit">Salvar pergunta</Button>
                </form>
              ))}
            </CardContent>
          </Card>
        ))}
      </div>
    </main>
  );
}