"use client";

import { Plus, X } from "lucide-react";

import { Button } from "@/components/ui/Button";
import { TextInput } from "@/components/ui/TextInput";
import {
  MAX_CHARACTER_COUNT,
  MIN_CHARACTER_COUNT,
  roleMixTotal,
  sanitizeRoleMix,
} from "@/lib/generation/cards";

// 单行配比：某定位 + 该定位要生成的数量。
export interface RoleMixRow {
  role: string;
  count: number;
}

interface RoleMixEditorProps {
  rows: RoleMixRow[];
  onChange: (rows: RoleMixRow[]) => void;
}

// 群像按定位配比编辑器（⑦）：一组「定位 + 数量」行；合计封顶 MAX_CHARACTER_COUNT。
// 不可变更新——每次编辑返回新数组，不改入参。
export function RoleMixEditor({ rows, onChange }: RoleMixEditorProps) {
  // 有效合计 = sanitize 后的总数（已按 MAX 截断），即实际会生成的张数。
  const effectiveTotal = roleMixTotal(sanitizeRoleMix(rows));

  const updateRow = (index: number, patch: Partial<RoleMixRow>): void => {
    onChange(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)));
  };
  const addRow = (): void => onChange([...rows, { role: "", count: 1 }]);
  const removeRow = (index: number): void =>
    onChange(rows.filter((_, i) => i !== index));

  return (
    <div className="flex flex-col gap-2" aria-label="角色定位配比">
      {rows.map((row, i) => (
        <div key={i} className="flex items-center gap-2">
          <TextInput
            value={row.role}
            onChange={(e) => updateRow(i, { role: e.target.value })}
            placeholder="定位：主角 / 对手 / 配角"
            aria-label={`第 ${i + 1} 行定位`}
            className="min-w-[10rem] flex-1"
          />
          <TextInput
            type="number"
            min={MIN_CHARACTER_COUNT}
            max={MAX_CHARACTER_COUNT}
            value={row.count}
            onChange={(e) =>
              updateRow(i, { count: Math.round(Number(e.target.value)) })
            }
            aria-label={`第 ${i + 1} 行数量`}
            className="w-20"
          />
          <Button
            variant="ghost"
            size="icon"
            onClick={() => removeRow(i)}
            disabled={rows.length <= 1}
            aria-label={`删除第 ${i + 1} 行`}
          >
            <X className="h-4 w-4" aria-hidden="true" />
          </Button>
        </div>
      ))}
      <div className="flex items-center justify-between">
        <Button variant="outline" size="sm" onClick={addRow}>
          <Plus className="h-4 w-4" aria-hidden="true" />
          添加定位
        </Button>
        <span className="text-xs text-ink-soft">
          合计 {effectiveTotal} / {MAX_CHARACTER_COUNT} 张
        </span>
      </div>
    </div>
  );
}