import { useQuery } from '@tanstack/react-query';
import { Link, useNavigate } from 'react-router-dom';
import { Database, Plus, FileStack, GitBranch } from 'lucide-react';

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  listDatasets,
  VISIBILITY_LABEL,
} from '@ump/shared';

/** Landing page — the investigator's own imaging datasets (their research data). */
export function DatasetsListPage() {
  const navigate = useNavigate();
  const { data, isLoading, isError } = useQuery({
    queryKey: ['imagehub', 'datasets', 'mine'],
    queryFn: () => listDatasets({ scope: 'mine' }),
  });

  return (
    <div className="mx-auto max-w-5xl space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="font-serif text-2xl font-semibold text-foreground">Bộ dữ liệu của tôi</h1>
          <p className="text-sm text-muted-foreground">
            Quản lý và phiên bản hóa dữ liệu hình ảnh nghiên cứu của bạn.
          </p>
        </div>
        <Button asChild>
          <Link to="/dashboard/datasets/new">
            <Plus className="mr-2 h-4 w-4" /> Tạo bộ dữ liệu mới
          </Link>
        </Button>
      </div>

      {isLoading && <p className="text-sm text-muted-foreground">Đang tải…</p>}
      {isError && <p className="text-sm text-destructive">Không tải được danh sách bộ dữ liệu.</p>}

      {data && data.length === 0 && (
        <Card className="text-center">
          <CardContent className="py-12">
            <Database className="mx-auto mb-3 h-10 w-10 text-muted-foreground" />
            <p className="text-sm text-muted-foreground">
              Bạn chưa có bộ dữ liệu nào. Bấm “Tạo bộ dữ liệu mới” để bắt đầu.
            </p>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-4 sm:grid-cols-2">
        {data?.map((d) => (
          <Card
            key={d.id}
            className="card-hover cursor-pointer"
            onClick={() => navigate(`/dashboard/datasets/${d.id}`)}
          >
            <CardHeader>
              <div className="flex items-start justify-between gap-2">
                <CardTitle className="text-base leading-snug">{d.name || '(Chưa đặt tên)'}</CardTitle>
                <Badge variant="outline">{VISIBILITY_LABEL[d.visibility]}</Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-1 text-sm text-muted-foreground">
              {d.description ? <p className="line-clamp-2">{d.description}</p> : null}
              <div className="flex items-center gap-4 pt-1">
                <span className="flex items-center gap-1">
                  <FileStack className="h-3.5 w-3.5" /> {d.fileCount} tệp
                </span>
                <span className="flex items-center gap-1">
                  <GitBranch className="h-3.5 w-3.5" /> {d.versionCount} phiên bản
                </span>
              </div>
              {d.modalityTags.length > 0 && (
                <div className="flex flex-wrap gap-1 pt-1">
                  {d.modalityTags.map((t) => (
                    <Badge key={t} variant="secondary" className="text-[11px]">
                      {t}
                    </Badge>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
