import { useState } from "react";
import type { NoteTask } from "@/lib/types";

export function TaskReviewPanel({
  tasks,
  onCreate,
  isCreating = false,
}: {
  tasks: NoteTask[];
  onCreate: (input: { title: string; description?: string }) => Promise<void>;
  isCreating?: boolean;
}) {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  async function handleCreateTask() {
    if (!title.trim()) {
      return;
    }

    await onCreate({
      title: title.trim(),
      description: description.trim() || undefined,
    });

    setTitle("");
    setDescription("");
  }

  return (
    <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
        <div style={{ fontWeight: 700 }}>Task extraction review</div>
        <span className="badge">backend-backed review</span>
      </div>
      <div className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: "var(--nl-space-3)" }}>
        <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
          <label htmlFor="task-title" style={{ color: "var(--nl-text-secondary)" }}>
            Add task
          </label>
          <input
            id="task-title"
            className="input-shell"
            value={title}
            onChange={(event) => setTitle(event.target.value)}
            placeholder="Task title"
          />
        </div>
        <textarea
          className="input-shell"
          value={description}
          onChange={(event) => setDescription(event.target.value)}
          placeholder="Description"
          style={{ minHeight: 96, resize: "vertical" }}
        />
        <div style={{ display: "flex", justifyContent: "flex-end" }}>
          <button
            type="button"
            disabled={isCreating}
            onClick={() => {
              void handleCreateTask();
            }}
            style={{
              border: "none",
              borderRadius: "var(--nl-radius-md)",
              padding: "8px 12px",
              background: "var(--nl-accent-primary)",
              color: "var(--nl-text-primary)",
              fontWeight: 600,
            }}
          >
            {isCreating ? "Adding…" : "Add task"}
          </button>
        </div>
      </div>
      {tasks.map((task) => (
        <div key={task.id} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
          <div style={{ display: "grid", gap: 4 }}>
            <strong>{task.title}</strong>
            <span style={{ color: "var(--nl-text-secondary)" }}>Source: {task.source}</span>
          </div>
          <span style={{ color: "var(--nl-text-secondary)" }}>{task.status}</span>
        </div>
      ))}
    </section>
  );
}