"use client";

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

export function SocialPollComposer({
  open,
  onClose,
  onSubmit,
  sending,
}: {
  open: boolean;
  onClose: () => void;
  onSubmit: (question: string, options: string[]) => void | Promise<void>;
  sending?: boolean;
}) {
  const [question, setQuestion] = useState("");
  const [options, setOptions] = useState(["", ""]);

  if (!open) return null;

  const validOptions = options.map((o) => o.trim()).filter(Boolean);

  const reset = () => {
    setQuestion("");
    setOptions(["", ""]);
  };

  const submit = async () => {
    if (!question.trim() || validOptions.length < 2) return;
    await onSubmit(question.trim(), validOptions);
    reset();
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[65] flex items-end justify-center bg-black/45 sm:items-center sm:p-4" onClick={onClose}>
      <div
        className="w-full max-w-md rounded-t-3xl bg-white p-5 shadow-2xl sm:rounded-3xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mb-4 flex items-center justify-between">
          <h3 className="font-bold text-slate-900">نظرسنجی جدید</h3>
          <button type="button" className="text-slate-400 hover:text-slate-600" onClick={onClose}>
            ×
          </button>
        </div>

        <label className="mb-3 block">
          <span className="mb-1 block text-xs font-semibold text-slate-600">سؤال</span>
          <input
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder="سؤال نظرسنجی را بنویسید…"
            className="w-full rounded-xl border border-slate-200 px-3 py-2.5 text-sm outline-none focus:border-teal-500"
          />
        </label>

        <div className="mb-4 space-y-2">
          <div className="text-xs font-semibold text-slate-600">گزینه‌ها</div>
          {options.map((opt, i) => (
            <div key={i} className="flex items-center gap-2">
              <input
                value={opt}
                onChange={(e) => {
                  const next = [...options];
                  next[i] = e.target.value;
                  setOptions(next);
                }}
                placeholder={`گزینه ${i + 1}`}
                className="min-w-0 flex-1 rounded-xl border border-slate-200 px-3 py-2 text-sm outline-none focus:border-teal-500"
              />
              {options.length > 2 ? (
                <button
                  type="button"
                  className="shrink-0 rounded-lg px-2 py-1 text-xs text-rose-600 hover:bg-rose-50"
                  onClick={() => setOptions(options.filter((_, idx) => idx !== i))}
                >
                  حذف
                </button>
              ) : null}
            </div>
          ))}
          {options.length < 10 ? (
            <button
              type="button"
              className="text-xs font-semibold text-teal-700 hover:underline"
              onClick={() => setOptions([...options, ""])}
            >
              + افزودن گزینه
            </button>
          ) : null}
        </div>

        <div className="flex gap-2">
          <Button variant="secondary" className="flex-1" onClick={onClose}>
            انصراف
          </Button>
          <Button
            className="flex-1"
            disabled={sending || !question.trim() || validOptions.length < 2}
            onClick={() => void submit()}
          >
            {sending ? "در حال ارسال…" : "ارسال نظرسنجی"}
          </Button>
        </div>
      </div>
    </div>
  );
}