"use client";

import { motion } from "framer-motion";
import {
  Send,
  Loader2,
  Flame,
  Calendar,
  Sparkles,
  ChevronRight,
  Lightbulb,
  Shuffle,
} from "lucide-react";
import type { WeekendPlanData } from "@/types";

interface BlindboxPoolPhaseProps {
  input: string;
  setInput: (v: string) => void;
  submitting: boolean;
  suggestions: string[];
  suggestionsLoading: boolean;
  suggestionsSource: "static" | "ai";
  poolCount: number;
  error: string;
  setError: (e: string) => void;
  inputRef: React.RefObject<HTMLInputElement | null>;
  planDays: WeekendPlanData[];
  planAccepted: boolean;
  hasLocation: boolean;
  onSubmit: () => void;
  onDraw: () => void;
  onPlanStart: () => void;
  onRefreshSuggestions: () => void;
  onShowPlan: () => void;
  onLocationMissing: () => void;
}

export default function BlindboxPoolPhase({
  input,
  setInput,
  submitting,
  suggestions,
  suggestionsLoading,
  suggestionsSource,
  poolCount,
  error,
  setError,
  inputRef,
  planDays,
  planAccepted,
  hasLocation,
  onSubmit,
  onDraw,
  onPlanStart,
  onRefreshSuggestions,
  onShowPlan,
  onLocationMissing,
}: BlindboxPoolPhaseProps) {
  return (
    <motion.div
      key="pool"
      className="mt-8 flex w-full max-w-sm flex-col items-center gap-5"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
    >
      <div className="flex w-full gap-2">
        <input
          ref={inputRef}
          type="text"
          placeholder="塞入一个疯狂的周末想法..."
          value={input}
          onChange={(e) => { setInput(e.target.value); setError(""); }}
          onKeyDown={(e) => { if (e.key === "Enter") onSubmit(); }}
          maxLength={200}
          disabled={submitting}
          className="h-12 flex-1 rounded-xl border-none bg-surface px-4 text-sm text-foreground outline-none ring-1 ring-border transition-all placeholder:text-dim focus:ring-2 focus:ring-purple-600 disabled:opacity-50"
        />
        <button
          onClick={onSubmit}
          disabled={!input.trim() || submitting}
          aria-label="提交想法"
          className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600 text-white transition-colors hover:bg-purple-500 disabled:opacity-30"
        >
          {submitting ? <Loader2 size={18} className="animate-spin" /> : <Send size={18} />}
        </button>
      </div>

      {!input && (
        <div className="flex w-full flex-wrap items-center gap-1.5">
          {suggestionsSource === "ai" ? (
            <Sparkles size={13} className="mr-0.5 shrink-0 text-purple-400/80" />
          ) : (
            <Lightbulb size={13} className="mr-0.5 shrink-0 text-amber-500/80" />
          )}
          {suggestionsLoading ? (
            <>
              {[1, 2, 3].map((i) => (
                <div key={i} className="h-6 w-20 animate-pulse rounded-full bg-surface/60 ring-1 ring-border/40" />
              ))}
            </>
          ) : (
            suggestions.map((s) => (
              <button
                key={s}
                onClick={() => { setInput(s); inputRef.current?.focus(); }}
                className="rounded-full bg-surface/80 px-2.5 py-1 text-xs text-secondary ring-1 ring-border/60 transition-all hover:bg-purple-600/10 hover:text-purple-400 hover:ring-purple-600/30 active:scale-95"
              >
                {s}
              </button>
            ))
          )}
          <button
            onClick={onRefreshSuggestions}
            disabled={suggestionsLoading}
            aria-label="换一批灵感"
            className="ml-auto flex h-6 w-6 items-center justify-center rounded-full text-muted transition-colors hover:bg-surface hover:text-secondary disabled:opacity-30"
          >
            {suggestionsLoading ? <Loader2 size={12} className="animate-spin" /> : <Shuffle size={12} />}
          </button>
        </div>
      )}

      <div className="flex w-full gap-2">
        <motion.button
          onClick={onDraw}
          disabled={poolCount === 0}
          className="relative flex h-14 flex-1 items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-red-600 to-rose-500 text-sm font-black text-white shadow-lg shadow-red-900/40 transition-shadow hover:shadow-xl hover:shadow-red-900/50 disabled:opacity-40 disabled:shadow-none"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.97 }}
        >
          <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/10 to-transparent -translate-x-full animate-[shimmer_3s_infinite]" />
          <Flame size={18} />
          抽一个
        </motion.button>
        <motion.button
          onClick={() => {
            if (!hasLocation) { onLocationMissing(); return; }
            onPlanStart();
          }}
          disabled={poolCount < 2}
          className="relative flex h-14 flex-1 items-center justify-center gap-2 overflow-hidden rounded-2xl bg-linear-to-r from-purple-600 to-indigo-600 text-sm font-black text-white shadow-lg shadow-purple-900/40 transition-shadow hover:shadow-xl hover:shadow-purple-900/50 disabled:opacity-40 disabled:shadow-none"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.97 }}
        >
          <Calendar size={18} />
          周末计划
        </motion.button>
      </div>

      {error && (
        <motion.p
          className="text-center text-xs font-medium text-rose-400"
          initial={{ opacity: 0, y: -4 }}
          animate={{ opacity: 1, y: 0 }}
        >
          {error}
        </motion.p>
      )}

      {planDays.length > 0 && !planAccepted && (
        <motion.button
          onClick={onShowPlan}
          className="flex w-full items-center justify-between rounded-xl bg-purple-600/10 px-4 py-2.5 ring-1 ring-purple-500/30 active:bg-purple-600/20"
          initial={{ opacity: 0, y: 4 }}
          animate={{ opacity: 1, y: 0 }}
        >
          <div className="flex items-center gap-2">
            <Sparkles size={14} className="text-purple-400" />
            <span className="text-xs font-bold text-purple-300">有一个待确认的计划</span>
          </div>
          <ChevronRight size={14} className="text-purple-400" />
        </motion.button>
      )}
    </motion.div>
  );
}
