import { useState, type FormEvent } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { ArrowLeft } from 'lucide-react';
import { toast } from 'sonner';

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Textarea,
  createDataset,
  VISIBILITY_LABEL,
  type DatasetVisibility,
} from '@ump/shared';

const VISIBILITIES: DatasetVisibility[] = ['private', 'internal', 'public'];

/** Create a new imaging dataset, then open the nnU-Net organizer to set it up + upload files. */
export function DatasetCreatePage() {
  const navigate = useNavigate();
  const qc = useQueryClient();
  // Project context from the cockpit "Tạo bộ dữ liệu" bridge — attaches the new dataset to the
  // project (research_project_id, migration 024) and drives the back-link + a context banner.
  const [searchParams] = useSearchParams();
  const projectId = searchParams.get('project');
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [visibility, setVisibility] = useState<DatasetVisibility>('private');
  const [tags, setTags] = useState('');

  const mut = useMutation({
    mutationFn: () =>
      createDataset({
        name: name.trim(),
        description: description.trim(),
        visibility,
        modalityTags: tags
          .split(',')
          .map((t) => t.trim())
          .filter(Boolean),
        researchProjectId: projectId ?? undefined,
      }),
    onSuccess: (ds) => {
      qc.invalidateQueries({ queryKey: ['imagehub', 'datasets'] });
      toast.success('Đã tạo bộ dữ liệu — hãy tải ảnh gốc và nhãn để bắt đầu');
      navigate(`/dashboard/datasets/${ds.id}/organize`);
    },
    onError: () => toast.error('Không tạo được bộ dữ liệu'),
  });

  const submit = (e: FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      toast.error('Vui lòng nhập tên bộ dữ liệu');
      return;
    }
    mut.mutate();
  };

  return (
    <div className="mx-auto max-w-2xl space-y-6">
      <Button
        variant="ghost"
        size="sm"
        onClick={() => navigate(projectId ? `/dashboard/projects/${projectId}` : '/dashboard')}
      >
        <ArrowLeft className="mr-2 h-4 w-4" /> {projectId ? 'Quay lại đề tài' : 'Quay lại'}
      </Button>

      <Card>
        <CardHeader>
          <CardTitle className="font-serif">Tạo bộ dữ liệu mới</CardTitle>
          {projectId && (
            <p className="text-sm text-muted-foreground">
              Bộ dữ liệu được tạo trong bối cảnh đề tài đang chọn, rồi tiếp tục sang bước tổ chức dữ liệu.
            </p>
          )}
        </CardHeader>
        <CardContent>
          <form onSubmit={submit} className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="ds-name">Tên bộ dữ liệu *</Label>
              <Input
                id="ds-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="VD: CT ngực ung thư phổi 2026"
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="ds-desc">Mô tả</Label>
              <Textarea
                id="ds-desc"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={3}
                placeholder="Mục đích, nguồn dữ liệu, phạm vi…"
              />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5">
                <Label>Mức hiển thị</Label>
                <Select value={visibility} onValueChange={(v) => setVisibility(v as DatasetVisibility)}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {VISIBILITIES.map((v) => (
                      <SelectItem key={v} value={v}>
                        {VISIBILITY_LABEL[v]}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="ds-tags">Nhãn phương thức</Label>
                <Input
                  id="ds-tags"
                  value={tags}
                  onChange={(e) => setTags(e.target.value)}
                  placeholder="CT, MRI (cách nhau bởi dấu phẩy)"
                />
              </div>
            </div>
            <div className="flex justify-end gap-2 pt-2">
              <Button type="button" variant="outline" onClick={() => navigate('/dashboard')}>
                Hủy
              </Button>
              <Button type="submit" disabled={mut.isPending}>
                {mut.isPending ? 'Đang tạo…' : 'Tạo bộ dữ liệu'}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
