"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { MANUAL_LANGUAGES, DEFAULT_MANUAL_LANGUAGE, type ManualLanguage } from "@tactical-media-broadcast-hub/core";
import { Button, Card, Input } from "../../../../components/ui/primitives";
import { api, errorMessage } from "../../../../lib/api-client";
import type { CollectiveNode } from "../../../../lib/api-types";

/**
 * Create a collective (operator reorder #3: the door from the no-collectives
 * home). Posts /collectives — the provisioner mints the room set, the founder
 * membership and the onboarding manual land in one transaction, then the user
 * is dropped on the tree. Bilingual by the same Spanish-first rule as the rest
 * of the product.
 */
export default function NewCollectivePage(): React.ReactElement {
  const router = useRouter();
  const [name, setName] = useState("");
  const [language, setLanguage] = useState<ManualLanguage>(DEFAULT_MANUAL_LANGUAGE);
  const [description, setDescription] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const ready = name.trim().length >= 2;

  async function create(): Promise<void> {
    setBusy(true);
    setError(null);
    try {
      const collective = await api.post<CollectiveNode>("/collectives", {
        name: name.trim(),
        language,
        ...(description.trim() === "" ? {} : { description: description.trim() }),
      });
      // Full navigation so the tree mounts with the new collective in place.
      router.push(`/streams?created=${encodeURIComponent(collective.name)}`);
    } catch (err) {
      setError(errorMessage(err));
      setBusy(false);
    }
  }

  return (
    <div className="flex h-full items-center justify-center p-6">
      <Card className="w-[520px] max-w-full p-6">
        <h1 className="text-xl font-semibold tracking-tight">Crear un colectivo</h1>
        <p className="mt-1 text-xs text-text-faint">
          Se crean tres salas — abierta (pública, nunca cifrada), cerrada (cifrada desde su creación) y de acogida
          (con el manual de participación) — y quedas como fundador/a.
        </p>
        <div className="mt-5 space-y-2">
          <Input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Nombre del colectivo"
            autoFocus
          />
          <label className="flex items-center justify-between gap-2 rounded-md border border-border bg-surface-2 px-3 py-2 text-xs">
            Idioma del manual
            <select
              value={language}
              onChange={(e) => setLanguage(e.target.value as ManualLanguage)}
              className="rounded-md border border-border bg-surface-2 px-2 py-1 text-xs"
            >
              {MANUAL_LANGUAGES.map((code) => (
                <option key={code} value={code}>
                  {code === "es" ? "Español" : "English"}
                </option>
              ))}
            </select>
          </label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows={3}
            placeholder="Descripción (opcional)"
            className="w-full resize-none rounded-md border border-border bg-surface-2 p-2 text-sm focus:border-accent focus:outline-none"
          />
        </div>
        {error !== null && <p className="mt-2 text-xs text-danger">{error}</p>}
        <div className="mt-6 flex items-center justify-between">
          <Button variant="ghost" onClick={() => router.back()}>Cancelar</Button>
          <Button variant="primary" disabled={busy || !ready} onClick={() => void create()}>
            {busy ? "Creando…" : "Crear colectivo"}
          </Button>
        </div>
      </Card>
    </div>
  );
}