import React, { useState, useEffect } from 'react';
import { useStoreData } from '../../hooks/useStoreData';
import { Store } from '../../utils/store';
import { AI } from '../../utils/aiLogic';
import { 
  Map, 
  Ghost, 
  Wand2, 
  RefreshCw, 
  MapPin, 
  ChevronDown, 
  Target, 
  Activity, 
  Package, 
  Repeat, 
  Edit3, 
  Trash2, 
  Check, 
  ArrowRight
} from 'lucide-react';
import { Button } from '../ui/Button';
import { GlassCard } from '../ui/GlassCard';
import { Select } from '../ui/Input';

export function PathView({ onSwitchToScript }) {
  const data = useStoreData();
  const [selectedScriptId, setSelectedScriptId] = useState('');
  const [loading, setLoading] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [expandedStep, setExpandedStep] = useState(null);
  const [editedPath, setEditedPath] = useState(null);

  // Initialize selectedScriptId when scripts are available
  useEffect(() => {
    if (data.generatedScripts.length > 0 && !selectedScriptId) {
      setSelectedScriptId(data.generatedScripts[0].id);
    }
  }, [data.generatedScripts, selectedScriptId]);

  // Find current path based on selected script
  const currentPath = data.paths?.find(p => p.scriptId === selectedScriptId);

  // Update local edited state when path changes
  useEffect(() => {
    if (currentPath) {
      setEditedPath(JSON.parse(JSON.stringify(currentPath))); // Deep copy
    } else {
      setEditedPath(null);
    }
  }, [currentPath]);

  const handleGenerate = async () => {
    if (currentPath && !window.confirm('重新生成将覆盖现有路径规划，确定吗？')) return;

    const script = data.generatedScripts.find(s => s.id === selectedScriptId);
    if (!script) return;

    setLoading(true);
    try {
      const newPath = await AI.generatePath(script, data.userProfile);
      Store.addPath(newPath);
      setIsEditing(false);
    } catch (e) {
      console.error(e);
      alert('规划失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async () => {
    if (window.confirm('确定要删除这个路径规划吗？')) {
      Store.deletePath(currentPath.id);

      // Sync to backend
      try {
          const allPaths = Store.get().paths;
          const profileRes = await userApi.getCurrentUser();
          if (profileRes.data) {
              await userApi.updateUserProfile({
                  id: profileRes.data.id,
                  paths: JSON.stringify(allPaths)
              });
          }
      } catch (err) {
          console.error("Failed to sync path deletion to backend", err);
      }

      setIsEditing(false);
    }
  };

  const handleSaveEdit = async () => {
    if (editedPath) {
      Store.updatePath(editedPath.id, { steps: editedPath.steps });
      
      // Sync to backend
      try {
          const allPaths = Store.get().paths;
          const profileRes = await userApi.getCurrentUser();
          if (profileRes.data) {
              await userApi.updateUserProfile({
                  id: profileRes.data.id,
                  paths: JSON.stringify(allPaths)
              });
          }
      } catch (err) {
          console.error("Failed to sync path update to backend", err);
      }

      setIsEditing(false);
    }
  };

  const handleStepEdit = (stepIndex, field, value) => {
    if (!editedPath) return;
    const newSteps = [...editedPath.steps];
    newSteps[stepIndex] = { ...newSteps[stepIndex], [field]: value };
    setEditedPath({ ...editedPath, steps: newSteps });
  };

  if (data.generatedScripts.length === 0) {
    return (
      <div className="max-w-4xl mx-auto md:p-12 pb-24">
        <header className="mb-8">
          <h2 className="text-3xl font-bold text-white mb-2 flex items-center gap-2">
            <span className="bg-green-100/10 p-2 rounded-lg text-aurora-green">
              <Map className="w-6 h-6 icon-glow" />
            </span>
            实现路径
          </h2>
          <p className="text-gray-400">将幻想落地为行动，AI为你定制专属计划。</p>
        </header>

        <div className="p-16 text-center text-gray-400 glass-card rounded-2xl border-dashed border-2 border-white/10">
          <Ghost className="w-16 h-16 mx-auto mb-4 opacity-30" />
          <p className="mb-4">你需要先有一个剧本，才能生成通往它的路径。</p>
          <button 
            className="text-primary font-bold hover:underline flex items-center justify-center gap-1 mx-auto" 
            onClick={onSwitchToScript}
          >
            去生成剧本 <ArrowRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto md:p-12 pb-24">
      <header className="mb-8">
        <h2 className="text-3xl font-bold text-white mb-2 flex items-center gap-2">
          <span className="bg-green-100/10 p-2 rounded-lg text-aurora-green">
            <Map className="w-6 h-6 icon-glow" />
          </span>
          实现路径
        </h2>
        <p className="text-gray-400">将幻想落地为行动，AI为你定制专属计划。</p>
      </header>

      <GlassCard className="mb-8 p-6 rounded-2xl border-l-4 border-accent flex flex-col md:flex-row items-center gap-4 shadow-sm">
        <div className="flex-1 w-full">
          <label className="block text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
            选择目标剧本
          </label>
          <div className="relative">
            <Select 
              value={selectedScriptId} 
              onChange={(e) => setSelectedScriptId(e.target.value)}
              className="w-full"
            >
              {data.generatedScripts.map(s => (
                <option key={s.id} value={s.id}>{s.title}</option>
              ))}
            </Select>
          </div>
        </div>
        <Button 
          onClick={handleGenerate} 
          isLoading={loading}
          className="w-full md:w-auto mt-4 md:mt-0"
        >
          {currentPath ? (
            <>
              <RefreshCw className="w-4 h-4 mr-2" /> 重新生成
            </>
          ) : (
            <>
              <Wand2 className="w-4 h-4 mr-2" /> 生成路径
            </>
          )}
        </Button>
      </GlassCard>

      <div className="transition-all duration-300 min-h-[300px]">
        {!currentPath ? (
          <div className="text-center py-20 opacity-50">
            <div className="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 border border-white/10">
              <MapPin className="w-8 h-8 text-gray-400" />
            </div>
            <p className="text-gray-400">尚未生成路径，点击上方按钮开始规划。</p>
          </div>
        ) : (
          <>
            <div className="flex justify-between items-center mb-6 animate-fade-in">
              <div className="text-sm text-gray-400">
                规划生成于 {new Date(currentPath.createdAt).toLocaleDateString()}
              </div>
              <div className="flex gap-2">
                <button 
                  onClick={isEditing ? handleSaveEdit : () => setIsEditing(true)}
                  className={`py-1.5 px-4 text-xs flex items-center gap-2 rounded-lg border transition-colors ${
                    isEditing 
                      ? 'bg-primary text-white border-primary hover:bg-primary/90' 
                      : 'border-white/20 text-gray-400 hover:text-primary hover:border-primary bg-transparent'
                  }`}
                >
                  {isEditing ? (
                    <><Check className="w-3 h-3" /> 保存</>
                  ) : (
                    <><Edit3 className="w-3 h-3" /> 编辑</>
                  )}
                </button>
                <button 
                  onClick={handleDelete}
                  className="py-1.5 px-4 text-xs flex items-center gap-2 rounded-lg border border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-400 bg-transparent"
                >
                  <Trash2 className="w-3 h-3" /> 删除
                </button>
              </div>
            </div>

            <div className="space-y-6 pb-12">
              {(isEditing ? editedPath.steps : currentPath.steps).map((step, idx) => (
                <GlassCard 
                  key={idx} 
                  className="relative p-0 overflow-hidden group hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
                >
                  {/* Progress Line */}
                  <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-white/5 z-0"></div>
                  
                  {/* Header */}
                  <div 
                    className="relative z-10 p-6 cursor-pointer flex items-center justify-between"
                    onClick={() => setExpandedStep(expandedStep === idx ? null : idx)}
                  >
                    <div className="flex items-center gap-5">
                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-green-400 text-white flex items-center justify-center font-bold text-lg shadow-lg shadow-primary/30 shrink-0">
                        {idx + 1}
                      </div>
                      <div>
                        <h4 className="font-bold text-lg text-white">{step.phase}</h4>
                        <span className="text-xs text-primary font-medium bg-primary/10 px-2 py-0.5 rounded-full border border-primary/20">
                          {step.time}
                        </span>
                      </div>
                    </div>
                    <ChevronDown 
                      className={`w-5 h-5 text-gray-400 transition-transform duration-300 ${
                        expandedStep === idx ? 'rotate-180' : ''
                      }`} 
                    />
                  </div>

                  {/* Details (Collapsible) */}
                  <div 
                    className={`relative z-10 px-6 pb-6 pt-0 border-t border-white/5 pl-[4.5rem] transition-all duration-300 overflow-hidden ${
                      expandedStep === idx ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0 py-0'
                    }`}
                  >
                    <div className="space-y-5 pt-4">
                      {/* Core Content */}
                      <div>
                        <h5 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                          <Target className="w-3 h-3" /> 核心策略
                        </h5>
                        <div 
                          contentEditable={isEditing}
                          onBlur={(e) => handleStepEdit(idx, 'content', e.currentTarget.textContent)}
                          className={`p-3 rounded-lg text-sm text-gray-300 leading-relaxed border transition-colors ${
                            isEditing 
                              ? 'bg-white/10 border-primary/50 ring-2 ring-primary/20' 
                              : 'bg-white/5 border-white/5'
                          }`}
                        >
                          {step.content}
                        </div>
                      </div>

                      {/* Actions */}
                      <div>
                        <h5 className="text-xs font-bold text-blue-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                          <Activity className="w-3 h-3" /> 关键行动
                        </h5>
                        <div 
                          contentEditable={isEditing}
                          onBlur={(e) => handleStepEdit(idx, 'action', e.currentTarget.textContent)}
                          className={`p-3 rounded-lg text-sm text-gray-300 transition-colors ${
                            isEditing 
                              ? 'bg-white/10 border border-primary/50 ring-2 ring-primary/20' 
                              : 'bg-blue-500/10 border border-blue-500/20'
                          }`}
                        >
                          {step.action}
                        </div>
                      </div>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {/* Resources */}
                        <div>
                          <h5 className="text-xs font-bold text-amber-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                            <Package className="w-3 h-3" /> 所需资源
                          </h5>
                          <div 
                            contentEditable={isEditing}
                            onBlur={(e) => handleStepEdit(idx, 'resources', e.currentTarget.textContent)}
                            className={`p-3 rounded-lg text-xs text-gray-400 leading-relaxed transition-colors ${
                              isEditing 
                                ? 'bg-white/10 border border-primary/50 ring-2 ring-primary/20' 
                                : 'bg-amber-500/10 border border-amber-500/20'
                            }`}
                          >
                            {step.resources}
                          </div>
                        </div>
                        {/* Habits */}
                        <div>
                          <h5 className="text-xs font-bold text-green-400 uppercase tracking-wider mb-2 flex items-center gap-1">
                            <Repeat className="w-3 h-3" /> 养成习惯
                          </h5>
                          <div 
                            contentEditable={isEditing}
                            onBlur={(e) => handleStepEdit(idx, 'habit', e.currentTarget.textContent)}
                            className={`p-3 rounded-lg text-xs text-gray-400 leading-relaxed transition-colors ${
                              isEditing 
                                ? 'bg-white/10 border border-primary/50 ring-2 ring-primary/20' 
                                : 'bg-green-500/10 border border-green-500/20'
                            }`}
                          >
                            {step.habit}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </GlassCard>
              ))}
            </div>
            
            <div className="text-center text-gray-500 text-xs italic mt-8">
              "路虽远，行则将至。"
            </div>
          </>
        )}
      </div>
    </div>
  );
}