import { useEffect, useState } from "react";
import { IconDoc } from "../lib/icons";
import Badge from "./ui/Badge";
import Button from "./ui/Button";

export default function DocumentCard({ doc, onDelete }) {
  const processed = doc.status === "processed";
  // Inline two-step delete confirm (no window.confirm): first click arms the
  // question, Confirm actually deletes. Resets on blur or after 5 seconds.
  const [confirming, setConfirming] = useState(false);

  useEffect(() => {
    if (!confirming) return;
    const t = setTimeout(() => setConfirming(false), 5000);
    return () => clearTimeout(t);
  }, [confirming]);

  return (
    <div className="doc-card">
      <div className="doc-card-head">
        <span className="doc-icon">
          <IconDoc />
        </span>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="doc-name">{doc.filename}</div>
          <div className="doc-sub">{doc.file_type.toUpperCase()}</div>
          {doc.error && <div className="doc-err">{doc.error}</div>}
        </div>
      </div>
      <div
        className="doc-foot"
        onBlur={(e) => {
          if (!e.currentTarget.contains(e.relatedTarget)) setConfirming(false);
        }}
      >
        {confirming ? (
          <>
            <span className="doc-confirm-msg">
              Delete this document and its history?
            </span>
            <div className="row" style={{ gap: 8 }}>
              <Button
                variant="danger"
                size="sm"
                onClick={() => {
                  setConfirming(false);
                  onDelete(doc);
                }}
              >
                Confirm
              </Button>
              <Button variant="ghost" size="sm" onClick={() => setConfirming(false)}>
                Cancel
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className="row" style={{ gap: 8 }}>
              <Badge tone={processed ? "success" : "danger"} dot>
                {doc.status}
              </Badge>
              {processed && (
                <span className="doc-sub">{doc.num_chunks} chunks</span>
              )}
            </div>
            <Button variant="danger" size="sm" onClick={() => setConfirming(true)}>
              Delete
            </Button>
          </>
        )}
      </div>
    </div>
  );
}