"use client";

import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { NONE_SELECT_VALUE, type SelectOption, type StudySeasonRow } from "../types";

type StudySeasonsEditorProps = {
  seasons: StudySeasonRow[];
  seasonOptions: SelectOption[];
  onChange: (seasons: StudySeasonRow[]) => void;
  disabled?: boolean;
};

export function StudySeasonsEditor({ seasons, seasonOptions, onChange, disabled }: StudySeasonsEditorProps) {
  const addSeason = () => {
    onChange([...seasons, { seasonDbId: "", label: "" }]);
  };

  const updateSeason = (index: number, seasonDbId: string) => {
    const option = seasonOptions.find((entry) => entry.value === seasonDbId);
    const next = [...seasons];
    next[index] = {
      seasonDbId,
      label: option?.label ?? seasonDbId,
    };
    onChange(next);
  };

  const removeSeason = (index: number) => {
    onChange(seasons.filter((_, itemIndex) => itemIndex !== index));
  };

  return (
    <div className="md:col-span-2">
      <div className="mb-2 flex items-center justify-between">
        <Label className="text-sm text-slate-700 dark:text-slate-200">关联季节 (study_season)</Label>
        <Button type="button" size="sm" variant="outline" className="gap-1.5" onClick={addSeason} disabled={disabled}>
          <Plus className="h-3.5 w-3.5" />
          添加季节
        </Button>
      </div>
      <div className="rounded-lg border border-slate-200 dark:border-slate-800">
        <Table>
          <TableHeader>
            <TableRow className="bg-slate-50 dark:bg-slate-900">
              <TableHead className="text-xs">季节</TableHead>
              <TableHead className="w-16 text-right text-xs">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {seasons.length === 0 ? (
              <TableRow>
                <TableCell colSpan={2} className="py-6 text-center text-sm text-slate-400">
                  暂无关联季节
                </TableCell>
              </TableRow>
            ) : (
              seasons.map((season, index) => (
                <TableRow key={`${season.seasonDbId}-${index}`}>
                  <TableCell>
                    <Select
                      value={season.seasonDbId || NONE_SELECT_VALUE}
                      onValueChange={(value) => {
                        if (value === NONE_SELECT_VALUE) return;
                        updateSeason(index, value);
                      }}
                      disabled={disabled}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="选择 season" />
                      </SelectTrigger>
                      <SelectContent position="popper" className="z-[110] max-h-60">
                        <SelectItem value={NONE_SELECT_VALUE}>请选择季节</SelectItem>
                        {seasonOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </TableCell>
                  <TableCell className="text-right">
                    <Button
                      type="button"
                      size="icon"
                      variant="ghost"
                      className="h-7 w-7 text-slate-400 hover:text-red-500"
                      onClick={() => removeSeason(index)}
                      disabled={disabled}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}
