import React, { useState, useEffect, useMemo } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
import { 
  CheckCircle, Circle, Trophy, Flame, Activity, Brain, Droplets, 
  Moon, Dumbbell, Utensils, Ban, Laptop, Settings, Trash2, Plus, X 
} from 'lucide-react';

// --- Components ---

const Card = ({ children, className = "" }) => (
  <div className={`bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden shadow-lg ${className}`}>
    {children}
  </div>
);

const HabitItem = ({ id, label, icon: Icon, checked, onChange, category, isEditing, onDelete }) => {
  let colorClass = "text-zinc-400";
  if (category === 'phys') colorClass = "text-emerald-400";
  if (category === 'biz') colorClass = "text-blue-400";
  if (category === 'dopa') colorClass = "text-rose-400";
  if (category === 'care') colorClass = "text-violet-400";
  
  // Use generic color if checked (or always color in edit mode for clarity)
  const iconColor = checked || isEditing ? colorClass : "text-zinc-600";
  const textColor = checked || isEditing ? "text-zinc-200" : "text-zinc-500";
  const bgClass = checked ? 'bg-zinc-800/50 border-zinc-700' : 'bg-zinc-900 border-zinc-800 hover:border-zinc-700';

  return (
    <div 
      onClick={!isEditing ? onChange : undefined}
      className={`
        flex items-center justify-between p-4 mb-2 rounded-lg transition-all duration-200 border
        ${isEditing ? 'bg-zinc-900 border-zinc-800 cursor-default' : `${bgClass} cursor-pointer`}
      `}
    >
      <div className="flex items-center gap-3">
        <div className={`p-2 rounded-md ${checked || isEditing ? 'bg-zinc-800' : 'bg-zinc-900'}`}>
          <Icon size={20} className={iconColor} />
        </div>
        <span className={`font-medium ${textColor}`}>
          {label}
        </span>
      </div>
      
      <div>
        {isEditing ? (
          <button 
            onClick={(e) => { e.stopPropagation(); onDelete(id); }}
            className="p-2 text-zinc-500 hover:text-red-500 hover:bg-zinc-800 rounded-full transition-colors"
          >
            <Trash2 size={20} />
          </button>
        ) : (
          checked ? (
            <CheckCircle className={colorClass} size={24} />
          ) : (
            <Circle className="text-zinc-700" size={24} />
          )
        )}
      </div>
    </div>
  );
};

const StatCard = ({ label, value, subtext, icon: Icon, color }) => (
  <Card className="p-4 flex flex-col items-center justify-center text-center">
    <div className={`mb-2 p-3 rounded-full bg-zinc-800 ${color}`}>
      <Icon size={24} />
    </div>
    <div className="text-2xl font-bold text-white mb-1">{value}</div>
    <div className="text-xs text-zinc-500 font-medium uppercase tracking-wider">{label}</div>
    {subtext && <div className="text-xs text-zinc-600 mt-1">{subtext}</div>}
  </Card>
);

// --- Constants ---

const DEFAULT_HABITS = [
  { id: 'move', label: '10k Steps OR Gym', iconName: 'Dumbbell', category: 'phys' },
  { id: 'macros', label: 'Hit Macros (Protein)', iconName: 'Utensils', category: 'phys' },
  { id: 'water', label: 'Water (3 Liters)', iconName: 'Droplets', category: 'phys' },
  { id: 'sleep', label: 'Sleep (7h+)', iconName: 'Moon', category: 'care' },
  { id: 'work', label: 'Deep Work (DS 2h+)', iconName: 'Laptop', category: 'biz' },
  { id: 'read', label: 'Read 10 Pages', iconName: 'Brain', category: 'biz' },
  { id: 'sugar', label: 'No Sugar', iconName: 'Ban', category: 'dopa' },
  { id: 'porn', label: 'No Porn', iconName: 'Flame', category: 'dopa' },
];

const ICON_MAP = {
  Dumbbell, Utensils, Droplets, Moon, Laptop, Brain, Ban, Flame, Activity
};

const CATEGORIES = [
  { id: 'phys', label: 'Physiology', color: 'bg-emerald-500' },
  { id: 'biz', label: 'Business', color: 'bg-blue-500' },
  { id: 'dopa', label: 'Dopamine', color: 'bg-rose-500' },
  { id: 'care', label: 'Self Care', color: 'bg-violet-500' },
];

const TIME_RANGES = [
  { label: '7D', days: 7 },
  { label: '30D', days: 30 },
  { label: '90D', days: 90 },
  { label: '1Y', days: 365 },
];

// --- Main Application ---

export default function MonkModeTracker() {
  // --- State ---
  const [history, setHistory] = useState({});
  const [habits, setHabits] = useState(DEFAULT_HABITS);
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
  const [isEditing, setIsEditing] = useState(false);
  const [chartRange, setChartRange] = useState(30);
  
  // New Habit Form State
  const [newHabitName, setNewHabitName] = useState('');
  const [newHabitCategory, setNewHabitCategory] = useState('phys');

  // --- Persistence ---
  
  useEffect(() => {
    // Load History
    const savedData = localStorage.getItem('monkModeData');
    if (savedData) {
      setHistory(JSON.parse(savedData));
    } else {
      const today = new Date().toISOString().split('T')[0];
      setHistory({ [today]: [] });
    }

    // Load Habits
    const savedHabits = localStorage.getItem('monkModeHabits');
    if (savedHabits) {
      setHabits(JSON.parse(savedHabits));
    }
  }, []);

  useEffect(() => {
    if (Object.keys(history).length > 0) {
      localStorage.setItem('monkModeData', JSON.stringify(history));
    }
  }, [history]);

  useEffect(() => {
    localStorage.setItem('monkModeHabits', JSON.stringify(habits));
  }, [habits]);

  // --- Actions ---
  
  const toggleHabit = (habitId) => {
    if (isEditing) return;
    const currentHabits = history[selectedDate] || [];
    let newHabits;
    
    if (currentHabits.includes(habitId)) {
      newHabits = currentHabits.filter(h => h !== habitId);
    } else {
      newHabits = [...currentHabits, habitId];
    }

    setHistory(prev => ({
      ...prev,
      [selectedDate]: newHabits
    }));
  };

  const deleteHabit = (habitId) => {
    if (confirm('Are you sure you want to delete this habit?')) {
      setHabits(prev => prev.filter(h => h.id !== habitId));
    }
  };

  const addHabit = () => {
    if (!newHabitName.trim()) return;
    const newId = `custom-${Date.now()}`;
    const newHabit = {
      id: newId,
      label: newHabitName,
      iconName: 'Activity', // Default icon for custom habits
      category: newHabitCategory
    };
    setHabits(prev => [...prev, newHabit]);
    setNewHabitName('');
  };

  const getDayConsistency = (date) => {
    const completed = history[date]?.length || 0;
    if (habits.length === 0) return 0;
    return Math.round((completed / habits.length) * 100);
  };

  const changeDate = (offset) => {
    const date = new Date(selectedDate);
    date.setDate(date.getDate() + offset);
    const newDateStr = date.toISOString().split('T')[0];
    setSelectedDate(newDateStr);
    
    if (!history[newDateStr]) {
      setHistory(prev => ({
        ...prev,
        [newDateStr]: []
      }));
    }
  };

  // --- Analytics ---

  const chartData = useMemo(() => {
    const days = [];
    // Loop based on selected chartRange (7, 30, 90, 365)
    for (let i = chartRange - 1; i >= 0; i--) {
      const d = new Date();
      d.setDate(d.getDate() - i);
      const dateStr = d.toISOString().split('T')[0];
      
      // For longer ranges, we might want cleaner labels, but slicing MM-DD is usually safe
      days.push({
        date: dateStr.slice(5), // MM-DD
        fullDate: dateStr,
        score: getDayConsistency(dateStr) || 0
      });
    }
    return days;
  }, [history, habits, chartRange]);

  const stats = useMemo(() => {
    const today = new Date().toISOString().split('T')[0];
    const score = getDayConsistency(today);
    
    let streak = 0;
    let checkDate = new Date();
    while (true) {
      const dateStr = checkDate.toISOString().split('T')[0];
      const dayScore = getDayConsistency(dateStr);
      
      if (dateStr !== today && dayScore < 80 && history[dateStr] !== undefined) break;
      if (history[dateStr] === undefined) break;
      
      if (dayScore >= 80) streak++;
      checkDate.setDate(checkDate.getDate() - 1);
    }

    const entries = Object.entries(history);
    const totalRecordedDays = entries.length;
    // Note: This calculates win rate based on CURRENT habits length. 
    // Ideally historical win rate should store the % at that time, but this is a close approximation for now.
    const winningDays = entries.filter(([_, completedIds]) => 
      habits.length > 0 && (completedIds.length / habits.length) >= 0.8
    ).length;
    const winRate = totalRecordedDays > 0 ? Math.round((winningDays / totalRecordedDays) * 100) : 0;

    return { score, streak, winRate };
  }, [history, habits]);


  return (
    <div className="min-h-screen bg-black text-zinc-100 font-sans selection:bg-emerald-500/30 pb-20">
      
      {/* Header */}
      <div className="max-w-md mx-auto p-6 pb-2">
        <div className="flex justify-between items-start mb-6">
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-white">Monk Mode</h1>
            <p className="text-zinc-500 text-sm font-medium">Protocol Tracker</p>
          </div>
          <div className="flex flex-col items-end gap-2">
            <button 
              onClick={() => setIsEditing(!isEditing)}
              className={`p-2 rounded-full transition-colors ${isEditing ? 'bg-zinc-800 text-white' : 'text-zinc-600 hover:text-white'}`}
            >
              <Settings size={20} />
            </button>
            {!isEditing && (
              <>
                 <div className="text-xs text-zinc-500 uppercase tracking-widest">Consistency</div>
                 <div className={`text-3xl font-black ${stats.score >= 80 ? 'text-emerald-400' : 'text-zinc-600'}`}>
                   {stats.score}%
                 </div>
              </>
            )}
          </div>
        </div>

        {/* Edit Mode Warning Banner */}
        {isEditing && (
          <div className="mb-6 p-4 bg-zinc-900 border border-zinc-800 rounded-lg flex items-center justify-between">
            <div className="text-sm text-zinc-300">
              <span className="font-bold text-white block mb-1">Edit Mode Active</span>
              Add or remove habits below.
            </div>
            <button 
              onClick={() => setIsEditing(false)}
              className="bg-emerald-600 hover:bg-emerald-500 text-white px-4 py-2 rounded-md text-sm font-bold transition-colors"
            >
              Done
            </button>
          </div>
        )}

        {/* Date Navigator (Hidden in Edit Mode) */}
        {!isEditing && (
          <div className="flex items-center justify-between mb-8 bg-zinc-900/50 p-2 rounded-lg border border-zinc-800">
            <button onClick={() => changeDate(-1)} className="p-2 hover:bg-zinc-800 rounded-md text-zinc-400">←</button>
            <div className="font-mono font-bold text-zinc-200">
              {new Date(selectedDate).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
            </div>
            <button 
              onClick={() => changeDate(1)} 
              disabled={selectedDate === new Date().toISOString().split('T')[0]}
              className="p-2 hover:bg-zinc-800 rounded-md text-zinc-400 disabled:opacity-30 disabled:cursor-not-allowed"
            >
              →
            </button>
          </div>
        )}

        {/* Stats Row (Hidden in Edit Mode) */}
        {!isEditing && (
          <div className="grid grid-cols-2 gap-4 mb-8">
            <StatCard 
              label="Win Streak" 
              value={`${stats.streak} Days`} 
              subtext="Target: >80%"
              icon={Flame} 
              color="text-orange-500"
            />
            <StatCard 
              label="Win Rate" 
              value={`${stats.winRate}%`} 
              subtext="Lifetime"
              icon={Trophy} 
              color="text-yellow-500"
            />
          </div>
        )}

        {/* Habits List */}
        <div className="space-y-6">
          {/* Categories Loop */}
          {CATEGORIES.map(cat => {
            const catHabits = habits.filter(h => h.category === cat.id);
            if (catHabits.length === 0 && !isEditing) return null;

            return (
              <div key={cat.id}>
                 {(catHabits.length > 0 || isEditing) && (
                   <h2 className="text-xs font-bold text-zinc-500 uppercase tracking-widest mb-3 ml-1">
                     {cat.label}
                   </h2>
                 )}
                 <div className="space-y-2">
                   {catHabits.map(habit => (
                     <HabitItem 
                       key={habit.id} 
                       id={habit.id}
                       label={habit.label}
                       icon={ICON_MAP[habit.iconName] || Activity}
                       category={habit.category}
                       checked={history[selectedDate]?.includes(habit.id)}
                       onChange={() => toggleHabit(habit.id)}
                       isEditing={isEditing}
                       onDelete={deleteHabit}
                     />
                   ))}
                 </div>
              </div>
            );
          })}

          {/* Add New Habit Form */}
          {isEditing && (
            <div className="mt-8 p-4 bg-zinc-900/50 border border-zinc-800 rounded-xl">
              <h3 className="text-white font-bold mb-4 flex items-center gap-2">
                <Plus size={16} /> Add New Habit
              </h3>
              <div className="space-y-3">
                <div>
                  <label className="text-xs text-zinc-500 uppercase font-bold tracking-wider mb-1 block">Name</label>
                  <input 
                    type="text" 
                    value={newHabitName}
                    onChange={(e) => setNewHabitName(e.target.value)}
                    placeholder="e.g., Cold Shower"
                    className="w-full bg-black border border-zinc-700 rounded-lg p-3 text-white placeholder-zinc-600 focus:outline-none focus:border-emerald-500 transition-colors"
                  />
                </div>
                <div>
                  <label className="text-xs text-zinc-500 uppercase font-bold tracking-wider mb-1 block">Category</label>
                  <div className="grid grid-cols-2 gap-2">
                    {CATEGORIES.map(cat => (
                      <button
                        key={cat.id}
                        onClick={() => setNewHabitCategory(cat.id)}
                        className={`
                          p-2 rounded-lg text-xs font-bold transition-all border
                          ${newHabitCategory === cat.id 
                            ? `bg-zinc-800 border-zinc-600 text-white` 
                            : 'bg-black border-zinc-800 text-zinc-500 hover:border-zinc-700'}
                        `}
                      >
                        <div className={`w-2 h-2 rounded-full ${cat.color} inline-block mr-2`} />
                        {cat.label}
                      </button>
                    ))}
                  </div>
                </div>
                <button 
                  onClick={addHabit}
                  className="w-full bg-white text-black font-bold py-3 rounded-lg mt-2 hover:bg-zinc-200 transition-colors"
                >
                  Add Habit
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Graph Section */}
        {!isEditing && (
          <div className="mt-12">
            <div className="flex items-center justify-between mb-4 pl-1">
              <h2 className="text-xs font-bold text-zinc-500 uppercase tracking-widest">Performance</h2>
              {/* Range Selectors */}
              <div className="flex gap-1 bg-zinc-900/50 p-1 rounded-lg border border-zinc-800">
                {TIME_RANGES.map(range => (
                  <button
                    key={range.label}
                    onClick={() => setChartRange(range.days)}
                    className={`
                      px-3 py-1 rounded-md text-[10px] font-bold transition-all
                      ${chartRange === range.days 
                        ? 'bg-zinc-700 text-white shadow-sm' 
                        : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800'}
                    `}
                  >
                    {range.label}
                  </button>
                ))}
              </div>
            </div>

            <Card className="h-64 p-4 pr-6 bg-zinc-900/50">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#27272a" vertical={false} />
                  <XAxis 
                    dataKey="date" 
                    stroke="#71717a" 
                    tick={{fontSize: 10}} 
                    tickLine={false}
                    axisLine={false}
                    dy={10}
                    interval="preserveStartEnd"
                    minTickGap={20}
                  />
                  <YAxis 
                    stroke="#71717a" 
                    tick={{fontSize: 10}} 
                    tickLine={false}
                    axisLine={false}
                    domain={[0, 100]}
                    hide
                  />
                  <Tooltip 
                    contentStyle={{ backgroundColor: '#18181b', border: '1px solid #27272a', borderRadius: '8px', color: '#fff', fontSize: '12px' }}
                    labelStyle={{ color: '#a1a1aa', marginBottom: '4px' }}
                    formatter={(value) => [`${value}%`, 'Consistency']}
                  />
                  <ReferenceLine y={80} stroke="#10b981" strokeDasharray="3 3" opacity={0.5} />
                  <Line 
                    type="monotone" 
                    dataKey="score" 
                    stroke="#3b82f6" 
                    strokeWidth={2} 
                    dot={chartRange <= 30 ? { r: 3, fill: '#18181b', strokeWidth: 2 } : false} 
                    activeDot={{ r: 5, fill: '#3b82f6' }}
                    animationDuration={500}
                  />
                </LineChart>
              </ResponsiveContainer>
            </Card>
            <p className="text-center text-xs text-zinc-600 mt-3">Green line indicates 80% target</p>
          </div>
        )}

      </div>
    </div>
  );
}