'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Pen, Edit3, BookOpen, Sparkles } from 'lucide-react';

interface UsageGuideProps {
  onSwitchToAdvanced?: () => void;
}

export function UsageGuide({ onSwitchToAdvanced }: UsageGuideProps) {
  return (
    <div className="grid grid-cols-2 gap-6">
      {/* 绘制工具指南 */}
      <Card className="p-6 bg-card">
        <div className="flex items-center gap-2 mb-4">
          <Pen className="w-5 h-5 text-green-600 dark:text-green-400" />
          <h3 className="text-green-800 dark:text-green-400">绘制工具</h3>
        </div>

        <div className="space-y-4 text-sm">
          <div>
            <h4 className="mb-2">1. 多边形绘制</h4>
            <ul className="space-y-1 text-muted-foreground ml-4">
              <li>• 点击地图依次标记顶点</li>
              <li>• 至少需要3个点</li>
              <li>• 点击起点或"完成"按钮闭合</li>
              <li>• 点击"保存"按钮保存到地块档案</li>
            </ul>
          </div>

          <div>
            <h4 className="mb-2">2. 保存流程</h4>
            <ul className="space-y-1 text-muted-foreground ml-4">
              <li>• 完成绘制后，点击左侧"保存"按钮</li>
              <li>• 弹出"新增地块"对话框</li>
              <li>• 填写地块信息（自动填充面积周长）</li>
              <li>• 保存到地块档案管理</li>
            </ul>
          </div>

          <div>
            <h4 className="mb-2">3. 快捷操作</h4>
            <ul className="space-y-1 text-muted-foreground ml-4">
              <li>• Ctrl+Z：撤销</li>
              <li>• Ctrl+Y：重做</li>
              <li>• Enter：完成绘制</li>
              <li>• Ctrl+S：保存到地块档案</li>
            </ul>
          </div>
        </div>
      </Card>

      {/* 编辑工具指南 */}
      <Card className="p-6 bg-card">
        <div className="flex items-center gap-2 mb-4">
          <Edit3 className="w-5 h-5 text-blue-600 dark:text-blue-400" />
          <h3 className="text-blue-800 dark:text-blue-400">编辑工具</h3>
        </div>

        <div className="space-y-4 text-sm">
          <div>
            <h4 className="mb-2">1. 节点编辑</h4>
            <ul className="space-y-1 text-muted-foreground ml-4">
              <li>• 点击地块选中</li>
              <li>• 拖动节点调整位置</li>
              <li>• 点击"保存"保存到地块档案</li>
            </ul>
          </div>

          <div>
            <h4 className="mb-2">2. 地块分割</h4>
            <ul className="space-y-1 text-muted-foreground ml-4">
              <li>• 选择要分割的地块</li>
              <li>• 绘制分割线</li>
              <li>• 点击"保存"保存到地块档案</li>
            </ul>
          </div>

          <div>
            <h4 className="mb-2">3. 地块合并</h4>
            <ul className="space-y-1 text-muted-foreground ml-4">
              <li>• 选择多个地块</li>
              <li>• 点击"合并"</li>
              <li>• 点击"保存"保存到地块档案</li>
            </ul>
          </div>
        </div>
      </Card>

      {/* 高级功能说明 */}
      <Card className="p-6 col-span-2 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
        <div className="flex items-center gap-2 mb-4">
          <Sparkles className="w-5 h-5 text-green-600 dark:text-green-400" />
          <h3 className="text-green-800 dark:text-green-400">高级功能（高级编辑器）</h3>
        </div>

        <div className="grid grid-cols-2 gap-x-8 gap-y-2 text-sm text-green-800 dark:text-green-200">
          <div>• <strong>文件导入</strong>：支持KML、GeoJSON、Shapefile格式</div>
          <div>• <strong>真实地图</strong>：集成高德地图/Leaflet地图引擎</div>
          <div>• <strong>坐标转换</strong>：支持WGS84、GCJ02坐标系转换</div>
          <div>• <strong>版本管理</strong>：自动记录编辑历史，随时回滚</div>
          <div>• <strong>批量操作</strong>：批量导入导出地块数据</div>
          <div>• <strong>数据关联</strong>：关联土壤、种植等业务数据</div>
          <div>• <strong>精确测量</strong>：基于真实地理坐标的精确测量</div>
          <div>• <strong>图层管理</strong>：多图层叠加显示和管理</div>
        </div>

        {onSwitchToAdvanced && (
          <div className="mt-4 pt-4 border-t border-green-300 dark:border-green-700">
            <Button
              onClick={onSwitchToAdvanced}
              className="bg-green-600 hover:bg-green-700 text-white"
            >
              <Sparkles className="w-4 h-4 mr-2" />
              立即体验高级编辑器
            </Button>
          </div>
        )}
      </Card>

      {/* 快捷键说明 */}
      <Card className="p-6 col-span-2 bg-card">
        <h3 className="mb-4">⌨️ 快捷键</h3>
        <div className="grid grid-cols-3 gap-4 text-sm">
          <div className="flex items-center gap-2">
            <kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl + Z</kbd>
            <span className="text-muted-foreground">撤销</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl + Y</kbd>
            <span className="text-muted-foreground">重做</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl + S</kbd>
            <span className="text-muted-foreground">保存到地块档案</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-2 py-1 bg-muted rounded text-xs">Delete</kbd>
            <span className="text-muted-foreground">清除</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-2 py-1 bg-muted rounded text-xs">Esc</kbd>
            <span className="text-muted-foreground">取消操作</span>
          </div>
          <div className="flex items-center gap-2">
            <kbd className="px-2 py-1 bg-muted rounded text-xs">Enter</kbd>
            <span className="text-muted-foreground">完成绘制</span>
          </div>
        </div>
      </Card>
    </div>
  );
}