"use client";

import { useState, type ReactNode } from "react";
import { ClientKanban } from "./ClientKanban";
import { TaskStatusLegend } from "@/components/client/TaskStatusIndicator";
import type { ClientView } from "@/lib/client-view";

export function PhaseViewToggle({
  timelineView,
  phases,
  token,
}: {
  timelineView: ReactNode;
  phases: ClientView["phases"];
  token: string;
}) {
  const [view, setView] = useState<"timeline" | "kanban">("timeline");

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg font-bold text-foreground tracking-tight">Fasi del Progetto</h2>
        <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
          <button
            onClick={() => setView("timeline")}
            className={`px-5 py-1.5 rounded-md text-[11px] font-semibold transition-all ${
              view === "timeline" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
            }`}
          >
            Timeline
          </button>
          <button
            onClick={() => setView("kanban")}
            className={`px-5 py-1.5 rounded-md text-[11px] font-semibold transition-all ${
              view === "kanban" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
            }`}
          >
            Kanban
          </button>
        </div>
      </div>

      {/* Fuori dallo switch: gli stati sono gli stessi in entrambe le viste */}
      <TaskStatusLegend />

      {view === "timeline" ? timelineView : <ClientKanban phases={phases} token={token} />}
    </div>
  );
}