"use client";

import { useState } from "react";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";

export const CANNED_SLOT_COUNT = 6;

export type CannedMessageSlot = {
  slot: number;
  title: string;
  body: string;
};

export type CannedTopicRow = {
  key: string;
  label: string;
  used_in: string;
  messages: CannedMessageSlot[];
};

function nextSlot(items: CannedMessageSlot[]): number {
  const used = new Set(items.map((item) => item.slot));
  for (let slot = 1; slot <= CANNED_SLOT_COUNT; slot++) {
    if (!used.has(slot)) return slot;
  }
  return items.length + 1;
}

export function padCannedMessages(messages: CannedMessageSlot[]): CannedMessageSlot[] {
  const bySlot = new Map(messages.map((item) => [item.slot, item]));
  return Array.from({ length: CANNED_SLOT_COUNT }, (_, index) => {
    const slot = index + 1;
    return bySlot.get(slot) ?? { slot, title: "", body: "" };
  });
}

export function CannedTopicEditor({
  topic,
  draft,
  saving,
  canApplyAll,
  applyToAll,
  onApplyToAllChange,
  onDraftChange,
  onSave,
}: {
  topic: CannedTopicRow;
  draft: CannedMessageSlot[];
  saving: boolean;
  canApplyAll: boolean;
  applyToAll: boolean;
  onApplyToAllChange: (value: boolean) => void;
  onDraftChange: (messages: CannedMessageSlot[]) => void;
  onSave: () => void;
}) {
  const [open, setOpen] = useState(false);
  const canAdd = draft.length < CANNED_SLOT_COUNT;

  return (
    <article className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-sm">
      <button
        type="button"
        onClick={() => setOpen((current) => !current)}
        className="flex w-full items-start justify-between gap-3 px-5 py-4 text-right"
        aria-expanded={open}
      >
        <span className="min-w-0">
          <span className="block text-base font-bold">{topic.label}</span>
          <span className="mt-1 block text-xs leading-6 text-[var(--muted)]">
            محل استفاده: {topic.used_in}
          </span>
          <span className="mt-0.5 block text-xs text-[var(--muted)]">
            {draft.length.toLocaleString("fa-IR")} از {CANNED_SLOT_COUNT.toLocaleString("fa-IR")} پیام
          </span>
        </span>
        <svg
          viewBox="0 0 24 24"
          className={`mt-1 h-5 w-5 shrink-0 text-slate-500 transition ${open ? "rotate-180" : ""}`}
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          aria-hidden
        >
          <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </button>

      {open ? (
        <div className="space-y-4 border-t border-[var(--border)] px-5 py-4">
          {draft.length === 0 ? (
            <p className="text-sm text-[var(--muted)]">هنوز پیامی برای این موضوع ثبت نشده است.</p>
          ) : (
            <div className="space-y-4">
              {draft.map((item, index) => (
                <div
                  key={item.slot}
                  className="space-y-2 rounded-xl border border-[var(--border)] bg-slate-50/60 p-3"
                >
                  <div className="flex items-center justify-between gap-2">
                    <div className="text-xs font-bold text-slate-500">پیام {index + 1}</div>
                    <Button
                      type="button"
                      variant="secondary"
                      onClick={() => onDraftChange(draft.filter((row) => row.slot !== item.slot))}
                    >
                      حذف
                    </Button>
                  </div>
                  <Field label="عنوان">
                    <Input
                      value={item.title}
                      onChange={(e) =>
                        onDraftChange(
                          draft.map((row) =>
                            row.slot === item.slot ? { ...row, title: e.target.value } : row,
                          ),
                        )
                      }
                      placeholder="عنوان کوتاه برای انتخاب در لیست"
                    />
                  </Field>
                  <label className="block text-sm">
                    <span className="mb-1 block font-medium">متن کامل پیام</span>
                    <textarea
                      rows={3}
                      value={item.body}
                      onChange={(e) =>
                        onDraftChange(
                          draft.map((row) =>
                            row.slot === item.slot ? { ...row, body: e.target.value } : row,
                          ),
                        )
                      }
                      className="w-full rounded-xl border border-[var(--border)] bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-primary focus:ring-2 ring-primary"
                    />
                  </label>
                </div>
              ))}
            </div>
          )}

          {canAdd ? (
            <Button
              type="button"
              variant="secondary"
              onClick={() =>
                onDraftChange([...draft, { slot: nextSlot(draft), title: "", body: "" }])
              }
            >
              افزودن پیام
            </Button>
          ) : null}

          <div className="flex flex-wrap items-end justify-between gap-4 border-t border-[var(--border)] pt-4">
            {canApplyAll ? (
              <label className="inline-flex max-w-md items-start gap-2 text-sm">
                <input
                  type="checkbox"
                  className="mt-0.5 h-4 w-4 rounded border-slate-300 text-primary"
                  checked={applyToAll}
                  onChange={(e) => onApplyToAllChange(e.target.checked)}
                />
                <span>
                  اعمال این تغییر در همه مدارس
                  <span className="mt-0.5 block text-xs font-normal text-[var(--muted)]">
                    پیام‌های پیش‌فرض «{topic.label}» روی مدارس موجود هم به‌روزرسانی می‌شود.
                  </span>
                </span>
              </label>
            ) : (
              <span />
            )}
            <Button onClick={onSave} disabled={saving} className="min-w-40">
              ذخیره این موضوع
            </Button>
          </div>
        </div>
      ) : null}
    </article>
  );
}