"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Select } from "@/components/ui/Select";
import { Toggle } from "@/components/ui/Toggle";
import { Card, CardHeader, CardTitle, Field, Label } from "@/components/ui/Card";
import {
  setDomesticQuestionStatus,
  updateDomesticQuestionMeta,
} from "@/lib/actions/admin-domestic";
import { DOMESTIC_SENSITIVITIES } from "@/lib/validation/domestic";
import { swalAlert, swalConfirm, swalToast } from "@/lib/utils/swal";
import type {
  DomesticQuestionStatus,
  DomesticSensitivity,
} from "@/types/participant";

interface DomesticQuestionSettingsProps {
  questionId: string;
  status: DomesticQuestionStatus;
  categories: Array<{ id: string; name: string }>;
  initial: {
    categoryId: string;
    sensitivity: DomesticSensitivity;
    isEntry: boolean;
    rotationWeight: number;
  };
}

export function DomesticQuestionSettings({
  questionId,
  status,
  categories,
  initial,
}: DomesticQuestionSettingsProps) {
  const router = useRouter();
  const [categoryId, setCategoryId] = useState(initial.categoryId);
  const [sensitivity, setSensitivity] = useState(initial.sensitivity);
  const [isEntry, setIsEntry] = useState(initial.isEntry);
  const [rotationWeight, setRotationWeight] = useState(String(initial.rotationWeight));
  const [busy, setBusy] = useState<string | null>(null);
  const retired = status === "retired";

  async function saveMeta() {
    setBusy("meta");
    const result = await updateDomesticQuestionMeta(questionId, {
      categoryId,
      sensitivity,
      isEntry,
      rotationWeight: Number(rotationWeight) || 0,
    });
    setBusy(null);
    void swalToast.fire({
      icon: result.success ? "success" : "error",
      title: result.success ? "Settings saved" : result.error,
    });
    if (result.success) router.refresh();
  }

  async function changeStatus(next: "published" | "paused" | "retired") {
    if (next === "retired") {
      const ok = await swalConfirm({
        title: "Retire this question?",
        text: "It will stop appearing in feeds permanently. Existing answers are kept.",
        confirmText: "Retire",
        danger: true,
      });
      if (!ok) return;
    }
    setBusy(next);
    const result = await setDomesticQuestionStatus({ questionId, status: next });
    setBusy(null);
    if (!result.success) {
      void swalAlert("Can't change status", result.error, "error");
      return;
    }
    router.refresh();
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Delivery settings</CardTitle>
        <span className="rounded-full bg-[#F1F5F9] px-2.5 py-1 text-[11.5px] font-bold capitalize text-muted">
          {status}
        </span>
      </CardHeader>
      <div className="p-5">
        <Field>
          <Label htmlFor="meta-category">Category</Label>
          <Select
            id="meta-category"
            value={categoryId}
            disabled={retired}
            onChange={(e) => setCategoryId(e.target.value)}
          >
            {categories.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </Select>
        </Field>
        <div className="grid grid-cols-2 gap-x-4">
          <Field>
            <Label htmlFor="meta-sensitivity">Sensitivity</Label>
            <Select
              id="meta-sensitivity"
              value={sensitivity}
              disabled={retired}
              onChange={(e) => setSensitivity(e.target.value as DomesticSensitivity)}
            >
              {DOMESTIC_SENSITIVITIES.map((s) => (
                <option key={s} value={s}>
                  {s[0].toUpperCase() + s.slice(1)}
                </option>
              ))}
            </Select>
          </Field>
          <Field>
            <Label htmlFor="meta-weight">Rotation priority</Label>
            <Input
              id="meta-weight"
              type="number"
              min={0}
              max={1000}
              value={rotationWeight}
              disabled={retired}
              onChange={(e) => setRotationWeight(e.target.value)}
            />
          </Field>
        </div>
        <div className="mb-4 flex items-center justify-between gap-3">
          <div>
            <div className="text-[13px] font-semibold">Entry question</div>
            <div className="text-[12px] text-muted">
              Off = follow-up only (reached through branch rules).
            </div>
          </div>
          <Toggle checked={isEntry} disabled={retired} onChange={setIsEntry} />
        </div>
        <Button
          type="button"
          variant="outline"
          size="sm"
          loading={busy === "meta"}
          disabled={retired}
          onClick={saveMeta}
        >
          Save settings
        </Button>

        {!retired && (
          <div className="mt-5 flex flex-wrap gap-2 border-t border-border pt-4">
            {(status === "draft" || status === "review" || status === "paused") && (
              <Button
                type="button"
                size="sm"
                loading={busy === "published"}
                onClick={() => changeStatus("published")}
              >
                Publish
              </Button>
            )}
            {status === "published" && (
              <Button
                type="button"
                variant="outline"
                size="sm"
                loading={busy === "paused"}
                onClick={() => changeStatus("paused")}
              >
                Pause delivery
              </Button>
            )}
            <Button
              type="button"
              variant="danger"
              size="sm"
              loading={busy === "retired"}
              onClick={() => changeStatus("retired")}
            >
              Retire
            </Button>
          </div>
        )}
      </div>
    </Card>
  );
}