import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { SchemeAuditTab } from "../features/schemes/SchemeAuditTab";
import { SchemeOverviewTab } from "../features/schemes/SchemeOverviewTab";
import { SchemePricingTab } from "../features/schemes/SchemePricingTab";
import { SchemeStructureTab } from "../features/schemes/SchemeStructureTab";
import { SchemeTestModeTab } from "../features/schemes/SchemeTestModeTab";
import { SchemeVersionsTab } from "../features/schemes/SchemeVersionsTab";
import { SchemeViewerTab } from "../features/schemes/SchemeViewerTab";

type DetailTab = "viewer" | "overview" | "versions" | "structure" | "pricing" | "test" | "audit";

export function SchemeDetailPage() {
  const { schemeId } = useParams();
  const [tab, setTab] = useState<DetailTab>("viewer");

  if (!schemeId) {
    return (
      <div className="panel error">
        <h2>ID схемы отсутствует</h2>
        <Link to="/" className="btn btn-secondary">Назад к списку</Link>
      </div>
    );
  }

  return (
    <>
      <div className="panel">
        <div className="scheme-card-header">
          <div>
            <h1>Карточка схемы</h1>
            <p className="muted">ID схемы: {schemeId}</p>
          </div>

          <div className="toolbar">
            <button type="button" className={`btn ${tab === "viewer" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("viewer")}>Просмотр схемы</button>
            <button type="button" className={`btn ${tab === "overview" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("overview")}>Обзор</button>
            <button type="button" className={`btn ${tab === "versions" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("versions")}>Версии</button>
            <button type="button" className={`btn ${tab === "structure" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("structure")}>Структура</button>
            <button type="button" className={`btn ${tab === "pricing" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("pricing")}>Тарифы</button>
            <button type="button" className={`btn ${tab === "test" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("test")}>Тестовый режим</button>
            <button type="button" className={`btn ${tab === "audit" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("audit")}>Аудит</button>
          </div>
        </div>
      </div>

      {tab === "viewer" ? <SchemeViewerTab schemeId={schemeId} /> : null}
      {tab === "overview" ? <SchemeOverviewTab schemeId={schemeId} /> : null}
      {tab === "versions" ? <SchemeVersionsTab schemeId={schemeId} /> : null}
      {tab === "structure" ? <SchemeStructureTab schemeId={schemeId} /> : null}
      {tab === "pricing" ? <SchemePricingTab schemeId={schemeId} /> : null}
      {tab === "test" ? <SchemeTestModeTab schemeId={schemeId} /> : null}
      {tab === "audit" ? <SchemeAuditTab schemeId={schemeId} /> : null}
    </>
  );
}