'use client';

import { useState } from 'react';
import { Check, Copy } from 'lucide-react';

function CopyButton({ value }) {
  const [copied, setCopied] = useState(false);

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      setCopied(false);
    }
  }

  return (
    <button
      onClick={handleCopy}
      className="inline-flex items-center gap-1.5 rounded-full border border-[rgba(255,255,255,0.08)] bg-[#161616] px-3 py-1.5 text-xs text-secondary transition-colors hover:border-[rgba(255,255,255,0.16)] hover:text-white"
    >
      {copied ? <Check size={12} className="text-success" /> : <Copy size={12} />}
      {copied ? 'Copied' : 'Copy'}
    </button>
  );
}

function CodeCard({ title, body, tone = 'default' }) {
  const toneClass = tone === 'accent' ? 'border-brand/30' : 'border-[rgba(255,255,255,0.08)]';

  return (
    <div className={`rounded-2xl border bg-[#111] ${toneClass}`}>
      <div className="flex items-center justify-between gap-3 border-b border-[rgba(255,255,255,0.06)] px-4 py-3">
        <p className="text-sm font-medium text-secondary">{title}</p>
        <CopyButton value={body} />
      </div>
      <pre className="overflow-x-auto whitespace-pre-wrap px-4 py-4 text-xs text-secondary">{body}</pre>
    </div>
  );
}

function StepSection({ number, title, summary, children }) {
  return (
    <section className="rounded-3xl border border-[rgba(255,255,255,0.08)] bg-[#111] p-5 sm:p-6">
      <div className="flex items-start gap-4">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand/15 text-sm font-semibold text-brand">
          {number}
        </div>
        <div className="min-w-0 flex-1">
          <h2 className="text-xl font-semibold text-white">{title}</h2>
          <p className="mt-2 text-sm text-secondary">{summary}</p>
          {children && <div className="mt-5">{children}</div>}
        </div>
      </div>
    </section>
  );
}

/**
 * GuideClient: shared client component for framework integration guide pages.
 *
 * Renders a full guide layout: hero, numbered steps with optional code cards,
 * proof moment section, and governance as code (guardrails.yml) section.
 *
 * @param {object} props
 * @param {string} props.frameworkName e.g. "Claude Code"
 * @param {string} [props.frameworkIcon] Emoji or short string for visual accent
 * @param {Array<{number: number, title: string, summary: string, codeTitle?: string, codeBody?: string, note?: string}>} props.steps
 * @param {string} props.proofMoment Text describing what success looks like at /decisions
 * @param {string} props.guardrailsYaml YAML string for the governance as code section
 * @param {string} props.baseUrl Live host URL injected by the server component
 * @param {string} [props.eyebrow] Optional eyebrow text (default "Integration Guide")
 * @param {React.ReactNode} [props.subhead] Optional subhead override; defaults to the framework integration template
 */
export default function GuideClient({
  frameworkName,
  frameworkIcon,
  steps,
  proofMoment,
  guardrailsYaml,
  baseUrl,
  eyebrow = 'Integration Guide',
  subhead,
}) {
  return (
    <div className="space-y-6">
      {/* Hero */}
      <section className="rounded-3xl border border-brand/25 bg-[#111] p-6 sm:p-8">
        {frameworkIcon && (
          <p className="text-2xl" aria-hidden="true">
            {frameworkIcon}
          </p>
        )}
        <p className="mt-2 text-xs uppercase tracking-[0.32em] text-brand">{eyebrow}</p>
        <h1 className="mt-3 text-3xl font-bold tracking-tight text-white sm:text-4xl">
          {frameworkName}
        </h1>
        <p className="mt-3 max-w-3xl text-sm text-secondary">
          {subhead ?? (
            <>
              Connect {frameworkName} to DashClaw and get your first governed action into{' '}
              <span className="text-secondary">/decisions</span> in under 20 minutes.
            </>
          )}
        </p>
        {baseUrl && (
          <p className="mt-2 text-xs text-tertiary">
            Instance URL detected: <span className="text-secondary">{baseUrl}</span>
          </p>
        )}
      </section>

      {/* Steps */}
      {steps.map((step) => (
        <StepSection
          key={step.number}
          number={step.number}
          title={step.title}
          summary={step.summary}
        >
          {step.codeTitle && step.codeBody && (
            <CodeCard title={step.codeTitle} body={step.codeBody} />
          )}
          {step.note && (
            <p className="mt-4 text-sm text-tertiary">{step.note}</p>
          )}
        </StepSection>
      ))}

      {/* Proof moment */}
      <section className="rounded-3xl border border-success/20 bg-[#0a0a0a] p-6">
        <p className="text-xs uppercase tracking-[0.32em] text-success">What success looks like</p>
        <p className="mt-4 text-sm text-secondary">{proofMoment}</p>
        <p className="mt-3 text-sm text-tertiary">
          Navigate to <span className="font-mono text-secondary">/decisions</span> in your DashClaw
          instance. Your action should appear in the ledger within seconds of the agent run.
        </p>
      </section>

      {/* Governance as Code */}
      {guardrailsYaml && (
        <section className="rounded-3xl border border-[rgba(255,255,255,0.08)] bg-[#0a0a0a] p-6">
          <p className="text-xs uppercase tracking-[0.32em] text-tertiary">Governance as Code</p>
          <p className="mt-3 text-sm text-secondary">
            Drop a{' '}
            <span className="font-mono text-secondary">guardrails.yml</span> in your project root
            to enforce policies without code changes. DashClaw evaluates these rules at the guard
            step before any action executes.
          </p>
          <div className="mt-5">
            <CodeCard title="guardrails.yml" body={guardrailsYaml} />
          </div>
        </section>
      )}
    </div>
  );
}
