"use client";

import { cn } from "@/lib/utils";
import { CanvasField } from "../CanvasField";
import type { CanvasTemplate } from "@/lib/types";

interface InterviewNotesCanvasProps {
  canvas: CanvasTemplate;
  className?: string;
}

interface SectionProps {
  number: number;
  title: string;
  description: string;
  canvasId: string;
  fieldId: string;
  hasGreyBackground?: boolean;
  note?: string;
  textareaHeight?: string;
}

function Section({ number, title, description, canvasId, fieldId, hasGreyBackground, note, textareaHeight = "h-12" }: SectionProps) {
  return (
    <div
      className={cn(
        "border-2 md:border-[3px] border-black px-2 md:px-3 py-2 flex flex-col gap-1 flex-1 min-h-[120px] md:min-h-0",
        hasGreyBackground ? "bg-[#f9fafb]" : "bg-white"
      )}
    >
      {/* Header with number badge and title */}
      <div className="flex items-center gap-2">
        <div className="w-6 h-6 md:w-7 md:h-7 bg-black flex items-center justify-center flex-shrink-0">
          <span className="text-white text-[12px] md:text-[14px] font-bold leading-[20px] tracking-[-0.35px]">
            {number}
          </span>
        </div>
        <h2 className="text-[12px] md:text-[14px] font-bold text-[#0a0a0a] leading-[18px] md:leading-[20px] tracking-[-0.35px] uppercase">
          {title}
        </h2>
      </div>

      {/* Description */}
      <p className="text-[10px] md:text-[11px] text-[#4a5565] leading-[14px]">
        {description}
      </p>

      {/* Text input area - fills remaining space */}
      <div className="flex-1 min-h-[60px] md:min-h-0">
        <CanvasField
          canvasId={canvasId}
          field={{
            id: fieldId,
            type: "textarea",
            label: "",
            placeholder: "",
            rows: 2,
          }}
          className="h-full [&_textarea]:h-full [&_textarea]:min-h-[50px] md:[&_textarea]:min-h-[32px] [&_textarea]:resize-none [&_textarea]:border-2 [&_textarea]:border-[#d1d5dc] [&_textarea]:bg-white [&_label]:hidden [&>div]:h-full [&_textarea]:text-[14px] md:[&_textarea]:text-[12px]"
        />
      </div>

      {/* Optional note */}
      {note && (
        <div className="bg-[#e5e7eb] border-l-4 border-black pl-2 pr-1.5 py-1 flex-shrink-0">
          <p className="text-[10px] md:text-[11px] text-[#0a0a0a] leading-[12px] italic">
            {note}
          </p>
        </div>
      )}
    </div>
  );
}

/**
 * Interview Notes Canvas Template
 * Used for documenting stakeholder interviews with structured sections
 * Matches Figma design: Notes d'entretien — Partie Prenante
 */
export function InterviewNotesCanvas({ canvas, className, teamName, pageIndex = 1, isMultiPage = false }: InterviewNotesCanvasProps & { teamName?: string; pageIndex?: number; isMultiPage?: boolean }) {
  // Use page-indexed field IDs to keep data separate per page
  const fieldPrefix = pageIndex > 1 ? `page${pageIndex}-` : '';

  return (
    <div className={cn("h-full flex flex-col bg-white overflow-auto md:overflow-hidden", className)}>
      {/* Subtitle description */}
      <div className="px-2 md:px-3 pt-2 pb-1.5 border-b-2 md:border-b-4 border-black flex-shrink-0">
        <p className="text-[10px] md:text-[11px] text-[#364153] leading-[14px] tracking-[-0.1px]">
          Capturez les perspectives pour mieux comprendre le défi, l'écosystème et les tensions
          {isMultiPage && pageIndex > 1 && (
            <span className="ml-2 font-bold text-black">(Page {pageIndex})</span>
          )}
        </p>
      </div>

      {/* Four Sections - Use flex to distribute space evenly */}
      <div className="flex-1 flex flex-col gap-1.5 p-3 min-h-0">
        {/* Section 1: Profil & Rôle */}
        <Section
          number={1}
          title="Profil & Rôle dans l'écosystème"
          description="Qui est cette personne ? Quel est son rôle ? Comment est-elle connectée au défi ?"
          canvasId={canvas.id}
          fieldId={`${fieldPrefix}profil-role`}
          hasGreyBackground={true}
        />

        {/* Section 2: Perception du défi */}
        <Section
          number={2}
          title="Comment elle perçoit le défi"
          description="Quelle est sa vision du problème ? Qu'est-ce qui compte vraiment pour elle ? Quelles priorités ?"
          canvasId={canvas.id}
          fieldId={`${fieldPrefix}perception-defi`}
          hasGreyBackground={false}
        />

        {/* Section 3: Tensions & Contradictions */}
        <Section
          number={3}
          title="Tensions & Contradictions qu'elle vit"
          description="Quels dilemmes rencontre-t-elle ? Quels choix difficiles ? Quelles pressions contradictoires ?"
          canvasId={canvas.id}
          fieldId={`${fieldPrefix}tensions-contradictions`}
          hasGreyBackground={true}
          note={'💡 Ces tensions pourront alimenter le canevas "Tensions & Paradoxes"'}
        />

        {/* Section 4: Relations & Dépendances */}
        <Section
          number={4}
          title="Relations & Dépendances dans l'écosystème"
          description="Avec qui travaille-t-elle ? De qui dépend-elle ? Qui dépend d'elle ? Quelles collaborations ou conflits ?"
          canvasId={canvas.id}
          fieldId={`${fieldPrefix}relations-dependances`}
          hasGreyBackground={false}
        />
      </div>

      {/* Canvas-specific Footer */}
      <div className="border-t-2 border-[#d1d5dc] px-3 py-2 flex-shrink-0">
        <div className="flex justify-between items-center text-[10px] text-[#6a7282] leading-[12px]">
          <div className="flex items-center gap-1">
            <span>Interviewé(e) :</span>
            {/* For page > 1, maybe we want to reuse the same interviewee name? Or allow different? 
                Let's make it a separate field for now as it could be a continuation or a new interview. */}
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: `${fieldPrefix}interviewee-name`,
                type: "text",
                label: "",
                placeholder: "Nom..."
              }}
              hideLabel
              inputClassName="border-b border-gray-300 !p-0 !h-[20px] !rounded-none min-w-[100px] bg-transparent focus:border-black"
            />
          </div>
          <div className="flex gap-4">
            <span>Équipe : {teamName || ''}</span>
            <span>© Mathieu Aguesse 2026</span>
          </div>
          <div className="flex items-center gap-1">
            <span>Date :</span>
            <CanvasField
              canvasId={canvas.id}
              field={{
                id: `${fieldPrefix}interview-date`,
                type: "text",
                label: "",
                placeholder: "DD/MM"
              }}
              hideLabel
              inputClassName="border-b border-gray-300 !p-0 !h-[20px] !rounded-none min-w-[60px] bg-transparent focus:border-black"
            />
          </div>
        </div>
      </div>
    </div>
  );
}