import { useState } from "react";
import { ComparisonRow } from "@/features/report/ui/transformation/ComparisonRow";
import type { TransformationProposal } from "@/features/report/types/transformationProposal";
import { NewChannelProposalsTable } from "@/features/report/ui/transformation/NewChannelProposalsTable";
import { PlatformStrategyCard } from "@/features/report/ui/transformation/PlatformStrategyCard";
import {
  TRANSFORMATION_TABS,
  type TransformationTabKey,
} from "@/features/report/ui/transformation/transformationTabs";

export type TransformationTabbedViewProps = {
  data: TransformationProposal;
};

export function TransformationTabbedView({ data }: TransformationTabbedViewProps) {
  const [activeTab, setActiveTab] = useState<TransformationTabKey>("brand");

  return (
    <>
      <div className="flex flex-wrap gap-2 mb-8" role="tablist" aria-label="전환 제안 탭">
        {TRANSFORMATION_TABS.map((tab) => {
          const isActive = activeTab === tab.key;
          return (
            <button
              key={tab.key}
              type="button"
              role="tab"
              aria-selected={isActive}
              title={tab.labelKr}
              onClick={() => setActiveTab(tab.key)}
              className={`rounded-full px-4 py-2 label-12 font-medium transition-all break-keep cursor-pointer ${
                isActive
                  ? "btn-primary shadow-lg"
                  : "bg-white border border-neutral-20 text-neutral-70 hover:bg-neutral-10"
              }`}
            >
              {tab.label}
            </button>
          );
        })}
      </div>

      {activeTab === "brand" ? (
        <div
          className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up"
          role="tabpanel"
        >
          <h3 className="font-serif headline-24 text-navy-900 mb-4 break-keep">브랜드 아이덴티티</h3>
          {data.brandIdentity.map((item, i) => (
            <ComparisonRow key={`${item.area}-${i}`} area={item.area} asIs={item.asIs} toBe={item.toBe} />
          ))}
        </div>
      ) : null}

      {activeTab === "content" ? (
        <div
          className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up"
          role="tabpanel"
        >
          <h3 className="font-serif headline-24 text-navy-900 mb-4 break-keep">콘텐츠 전략</h3>
          {data.contentStrategy.map((item, i) => (
            <ComparisonRow key={`${item.area}-${i}`} area={item.area} asIs={item.asIs} toBe={item.toBe} />
          ))}
        </div>
      ) : null}

      {activeTab === "platform" ? (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6" role="tabpanel">
          {data.platformStrategies.map((strategy, i) => (
            <PlatformStrategyCard key={strategy.platform} strategy={strategy} index={i} />
          ))}
        </div>
      ) : null}

      {activeTab === "website" ? (
        <div
          className="rounded-2xl bg-white border border-neutral-20 shadow-sm p-6 card-shadow animate-fade-in-up"
          role="tabpanel"
        >
          <h3 className="font-serif headline-24 text-navy-900 mb-4 break-keep">웹사이트 개선</h3>
          {data.websiteImprovements.map((item, i) => (
            <ComparisonRow key={`${item.area}-${i}`} area={item.area} asIs={item.asIs} toBe={item.toBe} />
          ))}
        </div>
      ) : null}

      {activeTab === "newChannel" ? (
        <div role="tabpanel">
          <NewChannelProposalsTable rows={data.newChannelProposals} />
        </div>
      ) : null}
    </>
  );
}