"use client";

import { useState } from "react";
import { AdminConfessionEditForm } from "@/components/admin/AdminConfessionEditForm";
import { RICH_TEXT_CONTENT_CLASSES } from "@/lib/shared/rich-text-classes";

export function AdminConfessionCard({
  confessionId,
  title,
  body,
  visibility,
  authorLabel,
  isActive,
  isBot,
  toggleAction,
  removeAction,
}: {
  confessionId: string;
  title: string;
  body: string;
  visibility: "ACIK" | "GIZLI";
  authorLabel: string;
  isActive: boolean;
  isBot: boolean;
  toggleAction: () => Promise<void>;
  removeAction: () => Promise<void>;
}) {
  const [editing, setEditing] = useState(false);

  if (editing) {
    return (
      <AdminConfessionEditForm
        confessionId={confessionId}
        title={title}
        body={body}
        visibility={visibility}
        onDone={() => setEditing(false)}
      />
    );
  }

  return (
    <div className="rounded-2xl border border-border bg-surface p-4">
      <div className="mb-2 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-[13.5px] font-semibold">{authorLabel}</span>
          <span className="rounded-full bg-bg-alt px-2 py-0.5 text-[11px] font-semibold text-text-muted">
            {visibility === "GIZLI" ? "Gizli" : "Açık"}
          </span>
          {isBot && <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-semibold text-blue-700">Bot</span>}
          <span
            className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${
              isActive ? "bg-green-100 text-green-700" : "bg-accent/10 text-accent"
            }`}
          >
            {isActive ? "Aktif" : "Pasif"}
          </span>
        </div>
        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => setEditing(true)}
            className="rounded-lg bg-bg-alt px-3 py-1.5 text-[12px] font-semibold text-text-muted hover:bg-accent/10 hover:text-accent"
          >
            Düzenle
          </button>
          <form action={toggleAction}>
            <button className="rounded-lg bg-bg-alt px-3 py-1.5 text-[12px] font-semibold text-text-muted">
              {isActive ? "Pasif Yap" : "Aktif Yap"}
            </button>
          </form>
          <form action={removeAction}>
            <button className="rounded-lg bg-accent/10 px-3 py-1.5 text-[12px] font-semibold text-accent">Sil</button>
          </form>
        </div>
      </div>
      <h3 className="mb-1 text-[13.5px] font-bold">{title}</h3>
      <div
        dangerouslySetInnerHTML={{ __html: body }}
        className={`text-[14px] text-text ${RICH_TEXT_CONTENT_CLASSES}`}
      />
    </div>
  );
}