import React from 'react';
import { Settings, FastForward, RotateCcw, Calendar, PlayCircle, Trophy } from 'lucide-react';
import { UserProgress, WeekConfig } from '../types';

interface AdminControlsProps {
  weekConfig: WeekConfig;
  setWeekConfig: React.Dispatch<React.SetStateAction<WeekConfig>>;
  userProgress: UserProgress;
  setUserProgress: React.Dispatch<React.SetStateAction<UserProgress>>;
}

const AdminControls: React.FC<AdminControlsProps> = ({ weekConfig, setWeekConfig, userProgress, setUserProgress }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const startDemoDay1 = () => {
    // Reset to Day 1, Monday, 0 Shards. Perfect for showing the "Daily Click" flow.
    setUserProgress(prev => ({
      ...prev,
      shardsCollected: 0,
      currentStreak: 0,
      lastClickDate: null, // Allow clicking immediately
      clickedSponsorIds: [],
      hasMintedThisWeek: false
    }));
    setWeekConfig(prev => ({
      ...prev,
      currentDay: 1,
      isMintingOpen: false
    }));
  };

  const skipToMintingDay = () => {
    // Fast forward to "Next Monday" with 5 shards collected. Perfect for showing the Mint.
    setUserProgress(prev => ({
      ...prev,
      shardsCollected: 5,
      currentStreak: 5,
      lastClickDate: new Date().toDateString(), // Mark last day as done
      clickedSponsorIds: [], 
      hasMintedThisWeek: false
    }));
    setWeekConfig(prev => ({
      ...prev,
      currentDay: 1, // It's Monday again (mint day)
      isMintingOpen: true
    }));
  };

  if (!isOpen) {
    return (
      <button 
        onClick={() => setIsOpen(true)}
        className="fixed bottom-4 right-4 p-3 bg-gray-800 text-gray-400 hover:text-white rounded-full shadow-xl border border-gray-700 z-50 hover:scale-110 transition-transform"
      >
        <Settings size={20} />
      </button>
    );
  }

  return (
    <div className="fixed bottom-4 right-4 w-80 bg-gray-900 border border-gray-700 rounded-xl shadow-2xl p-4 z-50 animate-in fade-in slide-in-from-bottom-4">
      <div className="flex justify-between items-center mb-4">
        <h4 className="text-sm font-bold text-gray-300 uppercase tracking-wider flex items-center gap-2">
          <Settings size={14} /> Dev Tools
        </h4>
        <button onClick={() => setIsOpen(false)} className="text-gray-500 hover:text-white text-xs">
          Close
        </button>
      </div>

      <div className="space-y-3">
        <div className="p-3 bg-black/40 rounded-lg border border-gray-800">
           <p className="text-[10px] text-brand-400 font-bold uppercase mb-2">Demo / Screen Record Scenes</p>
           
           <button 
            onClick={startDemoDay1}
            className="w-full py-2 px-3 bg-brand-900/30 hover:bg-brand-900/50 text-white text-xs rounded-lg flex items-center gap-2 transition-colors mb-2 border border-brand-500/20"
           >
            <PlayCircle size={14} className="text-brand-400" />
            1. Start Day 1 (Fresh)
           </button>

           <button 
            onClick={skipToMintingDay}
            className="w-full py-2 px-3 bg-accent-900/30 hover:bg-accent-900/50 text-white text-xs rounded-lg flex items-center gap-2 transition-colors border border-accent-500/20"
           >
            <Trophy size={14} className="text-accent-400" />
            2. Skip to Reward Day (Mint Ready)
           </button>
        </div>

        <div className="pt-2 border-t border-gray-800">
             <p className="text-[10px] text-gray-500 font-bold uppercase mb-2">Manual Debug</p>
             <button 
                onClick={() => {
                    setWeekConfig(p => ({ ...p, currentDay: p.currentDay + 1 }));
                    setUserProgress(p => ({ ...p, lastClickDate: null, clickedSponsorIds: [] }));
                }}
                className="w-full py-2 px-3 bg-gray-800 hover:bg-gray-700 text-white text-xs rounded-lg flex items-center gap-2 transition-colors"
                >
                <Calendar size={14} className="text-blue-400" />
                Advance 1 Day
            </button>
        </div>
      </div>
      
      <div className="mt-4 pt-3 border-t border-gray-800 text-[10px] text-gray-600 flex justify-between">
        <span>Shib Insider Trail v1.0</span>
        <span className="text-brand-500">Demo Mode Active</span>
      </div>
    </div>
  );
};

export default AdminControls;