"use client";

import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import type {
  EstimateVersionView,
  EstimateWorkspaceView,
} from "~/components/estimates/EstimateWorkspace.types.js";

function EmptyState({ children }: { children: React.ReactNode }) {
  return (
    <div className="rounded-3xl border border-dashed border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-10 text-center text-sm text-gray-400">
      {children}
    </div>
  );
}

export function ScopeTab({ estimate }: { estimate: EstimateWorkspaceView }) {
  const versions = estimate.versions as EstimateVersionView[];
  const latestVersion = versions[0] ?? null;
  const scopeItems = latestVersion?.scopeItems ?? [];

  if (scopeItems.length === 0) {
    return <EmptyState>No scope rows captured for the current version yet.</EmptyState>;
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
        <span>Scope items define the deliverables and work packages in this estimate.</span>
        <InfoTooltip content="Each scope item represents a distinct deliverable (e.g. a shot, sequence, or asset). Scope items organize the estimate but do not directly affect cost calculations." />
      </div>
      {scopeItems.map((item) => (
        <div key={item.id} className="rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 shadow-sm">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <div className="flex items-center gap-2">
                <span className="rounded-full bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-xs font-medium text-gray-600 dark:text-gray-400">
                  #{item.sequenceNo}
                </span>
                <span className="rounded-full bg-brand-50 px-2.5 py-1 text-xs font-medium text-brand-700">
                  {item.scopeType}
                </span>
              </div>
              <h3 className="mt-3 text-lg font-semibold text-gray-900 dark:text-gray-100">{item.name}</h3>
              {item.description && <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">{item.description}</p>}
            </div>
            <div className="grid gap-2 text-right text-xs text-gray-400">
              {item.frameCount != null && <span>{item.frameCount} frames</span>}
              {item.itemCount != null && <span>{item.itemCount} units</span>}
              {item.unitMode && <span>{item.unitMode}</span>}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
