"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useRef, type ChangeEvent } from "react";
import { Download, FileText, Printer, RotateCcw, Upload } from "lucide-react";
import { Button } from "@/components/ui/Button";
import { normalizeCVCareerData } from "@/lib/storage";
import type { CVCareerData } from "@/lib/types/cv";

interface CvToolbarProps {
  onReset: () => void;
  data: CVCareerData;
  onImport: (value: CVCareerData) => void;
}

export function CvToolbar({ onReset, data, onImport }: CvToolbarProps) {
  const pathname = usePathname();
  const fileInputRef = useRef<HTMLInputElement>(null);

  function handleExport() {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "cv-maker.json";
    link.click();
    URL.revokeObjectURL(url);
  }

  function handleImportFile(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const parsed: unknown = JSON.parse(String(reader.result));
        const value = normalizeCVCareerData(parsed);
        if (value === null) {
          window.alert("Fichier invalide : ce n'est pas un CV au format attendu.");
          return;
        }
        if (window.confirm("Importer ce CV ? Le contenu actuel sera remplacé.")) {
          onImport(value);
        }
      } catch {
        window.alert("Fichier illisible : le JSON est invalide.");
      }
    };
    reader.readAsText(file);
  }

  return (
    <header className="print-hidden sticky top-0 z-10 flex flex-wrap items-center justify-between gap-3 border-b border-border bg-white px-6 py-3">
      <div className="flex items-center gap-2">
        <span className="flex h-8 w-8 items-center justify-center rounded-md bg-accent text-white">
          <FileText size={18} aria-hidden />
        </span>
        <span className="text-base font-bold text-ink">CV-Maker</span>
      </div>

      <nav className="flex flex-wrap items-center gap-2">
        <Button variant="ghost" size="sm" onClick={() => window.print()} title="Imprimer ou exporter en PDF">
          <Printer size={14} aria-hidden />
          Imprimer / PDF
        </Button>
        <input
          ref={fileInputRef}
          type="file"
          accept="application/json,.json"
          className="hidden"
          onChange={handleImportFile}
        />
        <Button
          variant="ghost"
          size="sm"
          onClick={() => fileInputRef.current?.click()}
          title="Importer un CV depuis un fichier JSON"
        >
          <Upload size={14} aria-hidden />
          Importer JSON
        </Button>
        <Button variant="ghost" size="sm" onClick={handleExport} title="Télécharger le CV au format JSON">
          <Download size={14} aria-hidden />
          Exporter JSON
        </Button>
        <Button
          variant="ghost"
          size="sm"
          title="Réinitialiser le CV"
          onClick={() => {
            if (window.confirm("Réinitialiser tout le contenu du CV ?")) onReset();
          }}
        >
          <RotateCcw size={14} aria-hidden />
          Réinitialiser
        </Button>
        {[
          { href: "/documentation", label: "Documentation" },
        ].map(({ href, label: linkLabel }) => {
          const active = pathname === href;
          return (
            <Link
              key={href}
              href={href}
              aria-current={active ? "page" : undefined}
              className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                active ? "bg-accent text-white" : "text-muted hover:text-ink"
              }`}
            >
              {linkLabel}
            </Link>
          );
        })}
      </nav>
    </header>
  );
}