import { useState } from "react";
import Link from "next/link";
import TermOutput from "./TermOutput";

function ShieldCheck() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z"
        stroke="#1C5D4C"
        strokeWidth="1.3"
        strokeLinejoin="round"
      />
      <path
        d="m5.6 8 1.7 1.7L10.6 6"
        stroke="#1C5D4C"
        strokeWidth="1.3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CheckMark() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.4" />
      <path
        d="m5.2 8.2 1.8 1.8 3.8-4"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    try {
      const el = document.createElement("textarea");
      el.value = text;
      el.setAttribute("readonly", "");
      el.style.position = "fixed";
      el.style.left = "-9999px";
      document.body.appendChild(el);
      el.select();
      const ok = document.execCommand("copy");
      el.remove();
      return ok;
    } catch {
      return false;
    }
  }
}

export default function WorkflowBlock({
  recipe,
  complete = false,
  onToggleComplete,
  focused = false,
}) {
  const [copied, setCopied] = useState(false);

  const onShare = async () => {
    const ok = await copyText(recipe.shareBlurb);
    if (!ok) return;
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1800);
  };

  return (
    <article
      id={recipe.anchor}
      className={`recipe recipe-nested${focused ? " recipe-focus" : ""}`}
      aria-labelledby={`${recipe.anchor}-title`}
    >
      <div className="recipe-top">
        <span className="recipe-id">
          recipe <b>{recipe.id}</b> · v{recipe.version} · {recipe.time} · {recipe.cost}
        </span>
        <span className="recipe-vert">{recipe.vertical}</span>
      </div>

      <div className="recipe-body">
        <h3 className="recipe-title" id={`${recipe.anchor}-title`}>
          {recipe.title}
        </h3>

        <div className="row">
          <div className="k">Problem</div>
          <div className="v">
            {recipe.problem}{" "}
            <span className="sub">{recipe.problemJob}</span>
          </div>
        </div>

        <div className="row">
          <div className="k">Actors</div>
          <div className="v">
            <ul className="plain-list">
              {recipe.actors.map((line) => (
                <li key={line}>{line}</li>
              ))}
            </ul>
          </div>
        </div>

        <div className="row">
          <div className="k">Setup</div>
          <div className="v">
            <ul className="plain-list">
              {recipe.setup.map((line) => (
                <li key={line}>{line}</li>
              ))}
            </ul>
          </div>
        </div>

        <div className="row">
          <div className="k">Safeguards</div>
          <div className="v">
            {recipe.safeguards.map((line) => (
              <div className="guard" key={line}>
                <ShieldCheck />
                <span>{line}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="row">
          <div className="k">Method</div>
          <div className="v">
            <ol className="steps">
              {recipe.method.map((step, i) => (
                <li key={i}>
                  <div className="step-copy">
                    {step.text}
                    {step.term ? <TermOutput id={step.term} /> : null}
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>

        <div className="row">
          <div className="k">Evidence</div>
          <div className="v">
            {recipe.evidence.map((line) => (
              <p key={line} className="evidence-p">
                {line}
              </p>
            ))}
          </div>
        </div>

        <div className="row">
          <div className="k">Try it</div>
          <div className="v">
            <p>
              About {recipe.tryit.minutes} minutes. {recipe.tryit.sample}{" "}
              {recipe.tryit.produce}
            </p>
            <p className="sub-line">
              {recipe.tryit.done}{" "}
              <a className="inline-sample" href={recipe.tryit.href} download>
                {recipe.tryit.hrefLabel}
              </a>
            </p>
            <p>
              <span className="chip">◷ {recipe.tryit.chip}</span>
            </p>
            {onToggleComplete ? (
              <div className="tryit-actions">
                <button
                  type="button"
                  className={`btn ${complete ? "btn-primary tryit-done" : "btn-ghost"}`}
                  aria-pressed={complete}
                  onClick={() => onToggleComplete(recipe.id)}
                >
                  {complete ? <CheckMark /> : null}
                  {complete ? "Counted as activation (demo)" : "Mark complete"}
                </button>
              </div>
            ) : null}
          </div>
        </div>

        <div className="row">
          <div className="k">Share</div>
          <div className="v">
            <p>
              Copy a short result line. Share the outcome, not the recipe text.
            </p>
            <div className="tryit-actions">
              <button type="button" className="btn btn-ghost" onClick={onShare}>
                {copied ? "Copied" : "Copy result line"}
              </button>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="k">Record</div>
          <div className="v recipe-record">
            <span>Author: {recipe.author}</span>
            <span>Sources: {recipe.sources}</span>
            <span>Last updated: {recipe.lastUpdated}</span>
            {focused ? (
              <span>
                <Link href={`/read/real-estate#${recipe.anchor}`}>
                  Back to the chapter
                </Link>
              </span>
            ) : (
              <span>
                <Link href={`/read/recipe/${recipe.id}`}>Open on paper</Link>
              </span>
            )}
          </div>
        </div>
      </div>
    </article>
  );
}