/**
 * Workspace cockpit tab — the imaging-dataset browser for one research project ("workspace").
 *
 * The dataset list ("Bộ dữ liệu") lives in the cockpit sidebar (see DatasetNav, rendered by
 * CockpitPage near "Mã đề tài"); WorkspacePanel renders the SELECTED dataset's contents
 * (folder tree / cases / dataset.json / validation / versions). The dataset query + selection
 * are owned by CockpitPage and passed in, so the sidebar nav and this pane stay in sync.
 * Datasets are linked to the project via research_project_id (migration 024).
 */
import { Link } from 'react-router-dom';
import { Folder, Info, Plus } from 'lucide-react';

import { Button, Card, CardContent, Skeleton, cn, type ImagehubDataset } from '@ump/shared';

import { DatasetWorkspaceView } from './DatasetWorkspaceView';

/** The "Bộ dữ liệu" selector list — rendered inside the cockpit sidebar. */
export function DatasetNav({
  datasets,
  activeId,
  onSelect,
  projectId,
  loading,
  error,
}: {
  datasets: ImagehubDataset[];
  activeId: string | null;
  onSelect: (id: string) => void;
  projectId: string;
  loading?: boolean;
  error?: boolean;
}) {
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-foreground">Bộ dữ liệu</span>
        <Button asChild variant="outline" size="sm">
          <Link to={`/dashboard/datasets/new?project=${projectId}`}>
            <Plus className="mr-1 h-3.5 w-3.5" /> Thêm
          </Link>
        </Button>
      </div>

      {loading ? (
        <Skeleton className="h-24 w-full" />
      ) : error ? (
        <div className="text-xs text-destructive">Không tải được danh sách bộ dữ liệu.</div>
      ) : datasets.length === 0 ? (
        <div className="rounded-lg border border-dashed border-sidebar-border px-2.5 py-3 text-[11px] text-muted-foreground">
          Chưa có bộ dữ liệu nào.
        </div>
      ) : (
        <Card>
          <CardContent className="space-y-0.5 p-1.5">
            {datasets.map((d) => {
              const active = d.id === activeId;
              return (
                <button
                  key={d.id}
                  onClick={() => onSelect(d.id)}
                  className={cn(
                    'flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors',
                    active ? 'bg-muted' : 'hover:bg-muted/50',
                  )}
                  style={active ? { boxShadow: 'inset 2px 0 0 hsl(var(--accent))' } : undefined}
                >
                  <Folder className={cn('h-4 w-4 shrink-0', active ? 'text-accent' : 'text-muted-foreground')} />
                  <span className="min-w-0 flex-1">
                    <span className="block truncate text-sm font-medium text-foreground">{d.name}</span>
                    <span className="block text-[11px] text-muted-foreground">{d.fileCount} tệp</span>
                  </span>
                </button>
              );
            })}
          </CardContent>
        </Card>
      )}

      <div className="flex items-start gap-2 rounded-lg border border-border bg-muted/40 px-2.5 py-2 text-[11px] text-muted-foreground">
        <Info className="mt-0.5 h-3 w-3 shrink-0" />
        <span>Các bộ dữ liệu hình ảnh thuộc đề tài này.</span>
      </div>
    </div>
  );
}

/** Right pane: the contents of the currently-selected dataset (or load/empty states). */
export function WorkspacePanel({
  projectId,
  datasetId,
  loading,
  error,
  isEmpty,
}: {
  projectId: string;
  datasetId: string | null;
  loading?: boolean;
  error?: boolean;
  isEmpty?: boolean;
}) {
  if (loading) return <Skeleton className="h-64 w-full" />;
  if (error) return <div className="text-sm text-destructive">Không tải được danh sách bộ dữ liệu.</div>;

  if (isEmpty || !datasetId) {
    return (
      <Card>
        <CardContent className="flex flex-col items-center gap-3 py-16 text-center">
          <Folder className="h-7 w-7 text-muted-foreground" />
          <p className="text-sm font-medium text-foreground">Đề tài này chưa có bộ dữ liệu hình ảnh nào.</p>
          <p className="max-w-sm text-xs text-muted-foreground">
            Tạo một bộ dữ liệu để bắt đầu tổ chức và kiểm tra dữ liệu hình ảnh.
          </p>
          <Button asChild size="sm">
            <Link to={`/dashboard/datasets/new?project=${projectId}`}>
              <Plus className="mr-1.5 h-4 w-4" /> Tạo bộ dữ liệu
            </Link>
          </Button>
        </CardContent>
      </Card>
    );
  }

  return <DatasetWorkspaceView key={datasetId} datasetId={datasetId} />;
}
