"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import WeatherCard from "./WeatherCard";
import SavingsCard from "./SavingsCard";

interface Props {
  weather: any;
  savings: any[];
}

export default function WeatherSavingsCard({ weather, savings }: Props) {
  const [view, setView] = useState<"weather" | "savings">("weather");

  return (
    <div className="h-full flex flex-col gap-2">
      {/* Toggle pills */}
      <div
        className="flex rounded-2xl p-1 gap-1"
        style={{
          background: "rgba(255,255,255,0.04)",
          border: "1px solid rgba(255,255,255,0.07)",
        }}
      >
        {[
          { id: "weather", label: "🌤 Погода" },
          { id: "savings", label: "💰 Цели" },
        ].map((tab) => (
          <motion.button
            key={tab.id}
            onClick={() => setView(tab.id as "weather" | "savings")}
            className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
            style={{
              color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
            }}
            whileTap={{ scale: 0.95 }}
          >
            {view === tab.id && (
              <motion.div
                className="absolute inset-0 rounded-xl"
                style={{
                  background: "rgba(255,255,255,0.08)",
                  border: "1px solid rgba(255,255,255,0.12)",
                }}
                layoutId="wsToggle"
                transition={{ type: "spring", stiffness: 500, damping: 35 }}
              />
            )}
            <span className="relative z-10">{tab.label}</span>
          </motion.button>
        ))}
      </div>

      {/* Content */}
      <div className="flex-1 min-h-0">
        <AnimatePresence mode="wait">
          {view === "weather" ? (
            <motion.div
              key="weather"
              className="h-full"
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 10 }}
              transition={{ duration: 0.2 }}
            >
              <WeatherCard weather={weather} />
            </motion.div>
          ) : (
            <motion.div
              key="savings"
              className="h-full"
              initial={{ opacity: 0, x: 10 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -10 }}
              transition={{ duration: 0.2 }}
            >
              <SavingsCard savings={savings} />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}