"use client";

import { useState } from "react";
import { Check, Copy, TrendingUp, TrendingDown, Minus, Clock } from "lucide-react";
import type { SeoAction } from "@/lib/audit/types";

interface Props {
  actions: SeoAction[];
  demoNudge?: (index: number) => React.ReactNode;
}

const IMPACT_STYLES = {
  high: { bg: "bg-red-100", text: "text-red-700" },
  medium: { bg: "bg-amber-100", text: "text-amber-700" },
  low: { bg: "bg-slate-100", text: "text-slate-600" },
};

const IMPACT_ICONS = {
  high: <TrendingUp className="w-3 h-3" />,
  medium: <Minus className="w-3 h-3" />,
  low: <TrendingDown className="w-3 h-3" />,
};

const EFFORT_LABELS = { hour: "< 1 hr", day: "1 day", week: "1 week" };

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

  function handleCopy() {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }).catch(() => {/* non-fatal */});
  }

  return (
    <button
      onClick={handleCopy}
      title="Copy action"
      className="p-1.5 rounded-md text-slate-300 hover:text-slate-600 hover:bg-slate-100 transition-colors shrink-0"
    >
      {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
    </button>
  );
}

export function PriorityActionsSection({ actions, demoNudge }: Props) {
  return (
    <div id="audit-priority-actions" className="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8">
      <h2 className="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-1">
        Priority Actions
      </h2>
      <p className="text-xs text-slate-400 mb-5">Ordered by impact. Implement in sequence for maximum effect.</p>

      <div className="space-y-3">
        {actions.map((a, i) => {
          const imp = IMPACT_STYLES[a.impact] ?? IMPACT_STYLES.medium;

          return (
            <div key={i}>
              <div className="flex items-start gap-4 p-4 border border-slate-100 rounded-xl hover:bg-slate-50/60 transition-colors group">
                <div className="w-7 h-7 rounded-lg bg-indigo-600 flex items-center justify-center text-white text-xs font-black shrink-0 mt-0.5">
                  {i + 1}
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-[15px] font-semibold text-slate-900">{a.title}</p>
                  <p className="text-sm text-slate-500 mt-1 leading-relaxed">{a.rationale}</p>
                  <div className="flex flex-wrap gap-1.5 mt-2">
                    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${imp.bg} ${imp.text}`}>
                      {IMPACT_ICONS[a.impact]} {a.impact} impact
                    </span>
                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-600">
                      <Clock className="w-3 h-3" /> {EFFORT_LABELS[a.effort] ?? a.effort}
                    </span>
                  </div>
                </div>
                <CopyButton text={`${a.title}\n\n${a.rationale}`} />
              </div>
              {demoNudge && demoNudge(i)}
            </div>
          );
        })}
      </div>
    </div>
  );
}
