"use client";

import { useState } from "react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";

// Two-tab shell for the portfolio landing view: the main properties table, and
// a "Needs attention" tab for properties that aren't matched to a UPRN yet.
// Both panels stay mounted (hidden with CSS) so the table keeps its filter /
// pagination state when the user flicks between tabs.
export default function PortfolioTabs({
  needsAttentionCount,
  properties,
  needsAttention,
}: {
  needsAttentionCount: number;
  properties: React.ReactNode;
  needsAttention: React.ReactNode;
}) {
  const [tab, setTab] = useState<"properties" | "needs-attention">("properties");

  // Nothing unmatched → no tab strip at all, just the properties table.
  if (needsAttentionCount === 0) return <>{properties}</>;

  return (
    <div>
      <div className="mb-4 flex items-center gap-1 border-b border-gray-200">
        <TabButton
          active={tab === "properties"}
          onClick={() => setTab("properties")}
        >
          Properties
        </TabButton>
        <TabButton
          active={tab === "needs-attention"}
          onClick={() => setTab("needs-attention")}
        >
          <ExclamationTriangleIcon className="h-4 w-4" />
          Needs attention
          {needsAttentionCount > 0 && (
            <span className="inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-amber-100 px-1.5 text-[11px] font-bold text-amber-800">
              {needsAttentionCount}
            </span>
          )}
        </TabButton>
      </div>

      <div className={tab === "properties" ? "" : "hidden"}>{properties}</div>
      <div className={tab === "needs-attention" ? "" : "hidden"}>
        {needsAttention}
      </div>
    </div>
  );
}

function TabButton({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`-mb-px flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-sm font-semibold transition-colors ${
        active
          ? "border-primary text-primary"
          : "border-transparent text-gray-500 hover:text-gray-800"
      }`}
    >
      {children}
    </button>
  );
}
