"use client";

import { useState } from "react";
import { CvTabs } from "@/components/cv/CvTabs";
import { MarkdownTextarea } from "@/components/cv/MarkdownTextarea";
import { ExperienceManager } from "@/components/cv/ExperienceManager";
import { CV_TABS, type CVTabId, type CVCareerData } from "@/lib/types/cv";

const PLACEHOLDERS: Record<CVTabId, string> = {
  accroche: "**Jean Dupont**\nDéveloppeur Full-Stack passionné par le web…",
  etatCivil:
    "**Jean Dupont**\n- jean.dupont@email.fr\n- 06 12 34 56 78\n- [Site web](https://mon-site.fr)\n- [GitHub](https://github.com/jean-dupont)",
  formations:
    "### Master Informatique\nUniversité — 2020\n\n### Licence Informatique\nUniversité — 2018",
  competences:
    "- JavaScript / TypeScript\n- React / Next.js\n- Node.js\n- SQL",
  softSkills:
    "- Esprit d'équipe\n- Autonomie\n- Curiosité technique",
  centresInteret:
    "- Randonnée\n- Lecture\n- Musique",
};

interface CvInputPanelProps {
  data: CVCareerData;
  onSetText: (tab: CVTabId, value: string) => void;
  onAddExperience: (titre: string, contenu: string) => void;
  onUpdateExperience: (id: string, titre: string, contenu: string) => void;
  onRemoveExperience: (id: string) => void;
}

export function CvInputPanel({
  data,
  onSetText,
  onAddExperience,
  onUpdateExperience,
  onRemoveExperience,
}: CvInputPanelProps) {
  const [activeTab, setActiveTab] = useState<CVTabId>("accroche");
  const meta = CV_TABS[activeTab];
  const textareaId = `textarea-${activeTab}`;

  return (
    <div className="print-hidden flex flex-col gap-4 p-6">
      <header>
        <h1 className="text-lg font-bold text-ink">Contenu du CV</h1>
        <p className="text-sm text-muted">
          Saisissez votre CV en Markdown. Le rendu s&apos;affiche en temps réel à droite.
        </p>
      </header>

      <CvTabs activeTab={activeTab} onTabChange={setActiveTab} />

      <MarkdownTextarea
        id={textareaId}
        label={`Zone ${meta.numero} — ${meta.label}`}
        value={data[activeTab]}
        onChange={(text) => onSetText(activeTab, text)}
        placeholder={PLACEHOLDERS[activeTab]}
        minHeightClass={activeTab === "accroche" ? "min-h-[120px]" : "min-h-[280px]"}
      />

      <ExperienceManager
        experiences={data.experiences}
        onAdd={onAddExperience}
        onUpdate={onUpdateExperience}
        onRemove={onRemoveExperience}
      />
    </div>
  );
}