"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Calendar, Clock, Sparkles, X } from "lucide-react";
import Button from "@/components/Button";

interface TimeConfig {
  date: string;
  startHour: number;
  endHour: number;
}

const PRESETS: { label: string; value: TimeConfig }[] = [
  { label: "周六全天", value: { date: "周六", startHour: 10, endHour: 21 } },
  { label: "周日全天", value: { date: "周日", startHour: 10, endHour: 21 } },
  { label: "整个周末", value: { date: "整个周末", startHour: 10, endHour: 21 } },
];

const HOURS = Array.from({ length: 15 }, (_, i) => i + 7);

export default function WeekendTimeSelector({
  onConfirm,
  onClose,
  loading,
}: {
  onConfirm: (config: TimeConfig) => void;
  onClose: () => void;
  loading?: boolean;
}) {
  const [config, setConfig] = useState<TimeConfig>(PRESETS[0].value);

  return (
    <motion.div
      className="fixed inset-0 z-50 flex items-end justify-center bg-black/50"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      onClick={onClose}
    >
      <motion.div
        className="w-full max-w-md rounded-t-3xl bg-surface px-6 pb-8 pt-4"
        initial={{ y: "100%" }}
        animate={{ y: 0 }}
        exit={{ y: "100%" }}
        transition={{ type: "spring", damping: 25, stiffness: 300 }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="mx-auto mb-4 h-1 w-10 rounded-full bg-border" />

        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Calendar size={16} className="text-purple-400" />
            <h3 className="text-sm font-bold text-heading">选择可用时间</h3>
          </div>
          <button onClick={onClose} aria-label="关闭" className="text-muted active:text-foreground">
            <X size={18} />
          </button>
        </div>

        <div className="mt-4 flex gap-2">
          {PRESETS.map((preset) => (
            <button
              key={preset.value.date}
              onClick={() => setConfig({ ...preset.value })}
              className={`flex-1 rounded-xl py-2.5 text-xs font-bold transition-all ${
                config.date === preset.value.date
                  ? "bg-purple-600 text-white shadow-lg shadow-purple-900/30"
                  : "bg-elevated text-secondary ring-1 ring-border"
              }`}
            >
              {preset.label}
            </button>
          ))}
        </div>

        <div className="mt-5 flex items-center gap-3">
          <Clock size={14} className="shrink-0 text-muted" />
          <div className="flex flex-1 items-center gap-2">
            <select
              value={config.startHour}
              onChange={(e) => setConfig((c) => ({ ...c, startHour: Number(e.target.value) }))}
              className="h-9 flex-1 rounded-lg bg-elevated px-2 text-center text-sm font-semibold text-foreground ring-1 ring-border"
            >
              {HOURS.filter((h) => h < config.endHour).map((h) => (
                <option key={h} value={h}>{String(h).padStart(2, "0")}:00</option>
              ))}
            </select>
            <span className="text-xs text-muted">至</span>
            <select
              value={config.endHour}
              onChange={(e) => setConfig((c) => ({ ...c, endHour: Number(e.target.value) }))}
              className="h-9 flex-1 rounded-lg bg-elevated px-2 text-center text-sm font-semibold text-foreground ring-1 ring-border"
            >
              {HOURS.filter((h) => h > config.startHour).map((h) => (
                <option key={h} value={h}>{String(h).padStart(2, "0")}:00</option>
              ))}
            </select>
          </div>
        </div>

        <Button
          onClick={() => onConfirm(config)}
          variant="purple"
          size="lg"
          loading={loading}
          icon={<Sparkles size={16} />}
          className="mt-6 w-full"
        >
          生成周末计划
        </Button>
      </motion.div>
    </motion.div>
  );
}
