Document Assembler & PDF Export

"use client";

import { useState, useCallback } from "react";

interface ResumeSection {
  id: string;
  kind: string;
  title: string;
  included: boolean;
  order: number;
}

export function DocumentAssembler({
  initialSections,
  onExport,
}: {
  initialSections: ResumeSection[];
  onExport: (sections: ResumeSection[]) => void;
}) {
  const [sections, setSections] = useState(initialSections);

  const toggle = useCallback((id: string) => {
    setSections((prev) =>
      prev.map((s) => (s.id === id ? { ...s, included: !s.included } : s))
    );
  }, []);

  const reorder = useCallback((id: string, direction: -1 | 1) => {
    setSections((prev) => {
      const idx = prev.findIndex((s) => s.id === id);
      const swap = idx + direction;
      if (swap < 0 || swap >= prev.length) return prev;
      const next = [...prev];
      [next[idx], next[swap]] = [next[swap], next[idx]];
      return next.map((s, i) => ({ ...s, order: i }));
    });
  }, []);

  return (
    <div className="space-y-1">
      {sections.map((s) => (
        <div
          key={s.id}
          className={[
            "flex items-center gap-3 px-3 py-2 rounded-lg",
            s.included ? "bg-[rgb(var(--surface-raised))]" : "opacity-40",
          ].join(" ")}
        >
          <button
            onClick={() => toggle(s.id)}
            className="w-5 h-5 rounded flex items-center justify-center
              border border-[rgb(var(--border))]"
          >
            {s.included && (
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M2 6l3 3 5-5" stroke="rgb(var(--accent))"
                  strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            )}
          </button>
          <span className="text-[13px] flex-1">{s.title}</span>
          {s.included && (
            <div className="flex gap-1">
              <button onClick={() => reorder(s.id, -1)}
                className="px-1 text-[rgb(var(--text-tertiary))]">↑</button>
              <button onClick={() => reorder(s.id, 1)}
                className="px-1 text-[rgb(var(--text-tertiary))]">↓</button>
            </div>
          )}
        </div>
      ))}
      <button className="mt-3 px-4 py-2 rounded-xl bg-[rgb(var(--accent))]
        text-white text-[13px] font-semibold"
        onClick={() => onExport(sections)}>
        Export PDF
      </button>
    </div>
  );
}