"use client";

import { useState } from "react";
import type { ImageAsset } from "@/lib/types";
import { getImageUrl } from "@/lib/api";

/**
 * 候选评估面板（Phase 1 占位）
 *
 * 对应 INFOLAYER.md 3.3.3 节：同轮生成的一组候选图的并排比较、
 * 快速评分、标注差异、挑选定稿。
 */
interface CandidatePanelProps {
  candidates: ImageAsset[];
  onPick?: (id: string) => void;
  onClose?: () => void;
}

export function CandidatePanel({ candidates, onPick, onClose }: CandidatePanelProps) {
  const [ratings, setRatings] = useState<Record<string, number>>({});
  const [notes, setNotes] = useState<Record<string, string>>({});

  if (candidates.length === 0) return null;

  return (
    <div className="fixed inset-y-0 right-0 w-[min(680px,100vw)] z-40
                    bg-[var(--bg-secondary)]/95 backdrop-blur-xl
                    border-l border-[var(--border)] shadow-2xl
                    flex flex-col animate-in slide-in-from-right">
      <div className="flex items-center justify-between px-5 py-3 border-b border-[var(--border)]">
        <div className="flex items-center gap-2">
          <h2 className="typo-h2">候选评估</h2>
          <span className="phase-chip">Phase 1</span>
          <span className="text-xs text-[var(--text-secondary)]">
            共 {candidates.length} 张
          </span>
        </div>
        <button
          onClick={onClose}
          className="w-7 h-7 rounded-lg flex items-center justify-center
                     text-[var(--text-secondary)] hover:text-[var(--text-primary)]
                     hover:bg-[var(--bg-tertiary)] cursor-pointer transition-all"
        >
          ✕
        </button>
      </div>

      <div className="flex-1 overflow-y-auto p-5 space-y-4">
        <div className="grid grid-cols-2 gap-4">
          {candidates.map((c, i) => (
            <div key={c.id} className="rounded-xl surface-2 overflow-hidden">
              <div className="relative aspect-square bg-[var(--bg-tertiary)]">
                {c.url ? (
                  <img src={getImageUrl(c.url)} alt={`候选 ${i + 1}`} className="w-full h-full object-cover" />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-xs text-[var(--text-secondary)]">
                    占位候选 {i + 1}
                  </div>
                )}
                <div className="absolute top-2 left-2 px-2 py-0.5 rounded-md
                                bg-[var(--bg-primary)]/70 backdrop-blur-sm
                                text-[10px] font-mono text-[var(--text-primary)]">
                  #{i + 1}
                </div>
              </div>
              <div className="p-2.5">
                <div className="flex gap-0.5 mb-1.5">
                  {[1, 2, 3, 4, 5].map((n) => (
                    <button
                      key={n}
                      onClick={() =>
                        setRatings((prev) => ({ ...prev, [c.id]: prev[c.id] === n ? 0 : n }))
                      }
                      className={`text-base leading-none cursor-pointer transition-colors ${
                        (ratings[c.id] ?? 0) >= n ? "text-[var(--accent)]" : "text-[var(--border)]"
                      }`}
                    >
                      ★
                    </button>
                  ))}
                </div>
                <input
                  value={notes[c.id] ?? ""}
                  onChange={(e) => setNotes((prev) => ({ ...prev, [c.id]: e.target.value }))}
                  placeholder="点评（占位）"
                  className="w-full px-2 py-1 text-[11px] rounded-md bg-[var(--bg-primary)]
                             border border-[var(--border)] focus:border-[var(--accent)]/40 outline-none"
                />
                <button
                  onClick={() => onPick?.(c.id)}
                  className="mt-1.5 w-full text-[11px] py-1 rounded-md
                             bg-[var(--accent)]/10 text-[var(--accent)] border border-[var(--accent)]/30
                             hover:bg-[var(--accent)]/20 cursor-pointer transition-all"
                >
                  选为定稿
                </button>
              </div>
            </div>
          ))}
        </div>

        <div className="placeholder-card rounded-lg p-3 text-xs text-[var(--text-secondary)]">
          <div className="typo-strong text-xs mb-1 text-[var(--text-primary)]">自动差异对比（占位）</div>
          构图 / 配色 / 细节的自动化差分尚未接入（Phase 2）。用户可在此给出评分与点评，
          Agent 将根据选中项做后续迭代。
        </div>
      </div>
    </div>
  );
}