"use client";

import { useEffect, useState } from "react";
import aiStyles from "@/styles/ai.module.css";
import styles from "./AiPromptPanel.module.css";

type Props = {
  open: boolean;
  title: string;
  initialPrompt: string;
  busy?: boolean;
  error?: string;
  disabled?: boolean;
  onClose: () => void;
  onRun: (prompt: string) => void;
};

export default function AiPromptPanel({
  open,
  title,
  initialPrompt,
  busy = false,
  error = "",
  disabled = false,
  onClose,
  onRun,
}: Props) {
  const [prompt, setPrompt] = useState(initialPrompt);

  useEffect(() => {
    if (open) setPrompt(initialPrompt);
  }, [open, initialPrompt]);

  if (!open) return null;

  return (
    <div className={styles.panel}>
      <div className={styles.head}>
        <div>
          <h3 className={styles.title}>{title}</h3>
          <p className={styles.subtitle}>
            Edit the prompt, then run AI to fill this field.
          </p>
        </div>
        <button
          type="button"
          className={styles.closeBtn}
          disabled={busy}
          aria-label="Close"
          onClick={onClose}
        >
          ×
        </button>
      </div>

      <label className={styles.field}>
        <span>Prompt</span>
        <textarea
          rows={10}
          value={prompt}
          disabled={busy || disabled}
          className={busy ? aiStyles.aiWorkingBorder : undefined}
          onChange={(event) => setPrompt(event.target.value)}
        />
      </label>

      {error ? (
        <p className={styles.error} role="alert">
          {error}
        </p>
      ) : null}

      <div className={styles.actions}>
        <button
          type="button"
          className={styles.secondaryBtn}
          disabled={busy}
          onClick={onClose}
        >
          Cancel
        </button>
        <button
          type="button"
          className={`${styles.primaryBtn} ${aiStyles.aiTrigger}`}
          disabled={busy || disabled || prompt.trim().length < 10}
          onClick={() => onRun(prompt.trim())}
        >
          {busy ? "Generating…" : "Run AI"}
        </button>
      </div>
    </div>
  );
}