import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import {
 ArrowLeft, Eye, EyeOff, Lock, Unlock, Share2,
 Building2, Factory, Package, Link2, CheckCircle,
 AlertTriangle, FileText, Palette, Hash, DollarSign,
 ChevronRight, ChevronDown, Shield, Database
} from 'lucide-react';
import { PLAN_STATUS } from '../utils/constants';

// 模拟完整计划数据（采购商视角）
const fullPlanData = {
 id: 'plan-123',
 plan_code: 'PLAN-2026-199465',
 product_name: '水洗棉花糖',
 color: '灰色',
 fabric_code: 'SX1',
 color_code: '01',
 remark: '60*40',
 target_quantity: 10000,
 yarn_usage_per_meter: 280,
 production_price: 12.5,
 status: PLAN_STATUS.PRODUCING
};

// 模拟纱线配比
const yarnRatios = [
 { yarn_name: '32S精梳棉', ratio: 60, amount_per_meter: 168, total_amount: 1680000 },
 { yarn_name: '40S涤纶', ratio: 40, amount_per_meter: 112, total_amount: 1120000 }
];

// 模拟入库记录
const inventoryRecords = [
 { time: '2026-05-23T15:30:00Z', rolls: 20, meters: 1800, factory: '兴盛纺织厂' },
 { time: '2026-05-22T09:15:00Z', rolls: 15, meters: 1350, factory: '兴盛纺织厂' },
 { time: '2026-05-21T14:20:00Z', rolls: 14, meters: 1250, factory: '兴盛纺织厂' }
];

export function DemoDataSharing() {
 const navigate = useNavigate();
 const [activeTab, setActiveTab] = useState<'purchaser' | 'textile' | 'flow'>('purchaser');
 const [showSensitive, setShowSensitive] = useState(false);
 const [expandedSection, setExpandedSection] = useState<string | null>('encryption');

 const toggleSection = (section: string) => {
 setExpandedSection(expandedSection === section ? null : section);
 };

 // 敏感信息字段
 const sensitiveFields = ['product_name', 'color', 'color_code'];
 
 // 可见字段（纺织厂视角）
 const visibleFields = ['plan_code', 'fabric_code', 'target_quantity', 'yarn_usage_per_meter', 'production_price', 'remark'];

 return (
 <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
 {/* Header */}
 <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
 <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-4">
 <button onClick={() => navigate(-1)} className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
 <ArrowLeft className="w-5 h-5 text-gray-600" />
 </button>
 <h1 className="text-xl font-bold text-gray-900">数据共享与敏感信息保护演示</h1>
 </div>
 </header>

 <div className="max-w-7xl mx-auto px-4 py-6">
 {/* 角色切换标签 */}
 <div className="flex gap-2 mb-6 bg-white p-2 rounded-xl shadow-sm border border-gray-200">
 {[
 { id: 'purchaser', label: '采购商视角', icon: Building2, color: 'blue' },
 { id: 'textile', label: '纺织厂视角', icon: Factory, color: 'emerald' },
 { id: 'flow', label: '数据流向', icon: Share2, color: 'purple' }
 ].map(tab => (
 <button
 key={tab.id}
 onClick={() => setActiveTab(tab.id as typeof activeTab)}
 className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg font-medium transition-all ${
 activeTab === tab.id 
 ? `bg-${tab.color}-500 text-white shadow-md` 
 : 'text-gray-600 hover:bg-gray-50'
 }`}
 >
 <tab.icon className="w-4 h-4" />
 {tab.label}
 </button>
 ))}
 </div>

 {/* 采购商视角 */}
 {activeTab === 'purchaser' && (
 <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-6">
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <div className="flex items-center gap-3 mb-6">
 <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center">
 <Building2 className="w-6 h-6 text-white" />
 </div>
 <div>
 <h2 className="text-lg font-bold text-gray-900">采购商（布行）完整数据</h2>
 <p className="text-sm text-gray-500">拥有所有字段的查看和编辑权限</p>
 </div>
 </div>

 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
 {Object.entries(fullPlanData).map(([key, value]) => (
 <div key={key} className={`p-4 rounded-xl border ${
 sensitiveFields.includes(key) 
 ? 'bg-amber-50 border-amber-200' 
 : 'bg-gray-50 border-gray-200'
 }`}>
 <p className="text-xs text-gray-500 mb-1">
 {key === 'plan_code' && '计划编号'}
 {key === 'product_name' && '成品名称'}
 {key === 'color' && '颜色'}
 {key === 'fabric_code' && '坯布识别码'}
 {key === 'color_code' && '色号'}
 {key === 'remark' && '备注'}
 {key === 'target_quantity' && '计划产量'}
 {key === 'yarn_usage_per_meter' && '每米布纱用量'}
 {key === 'production_price' && '生产采购价'}
 {key === 'status' && '状态'}
 </p>
 <p className="font-medium text-gray-900">
 {key === 'target_quantity' ? `${value} 米` : 
 key === 'yarn_usage_per_meter' ? `${value} g/m` :
 key === 'production_price' ? `¥${value}/米` : value}
 </p>
 {sensitiveFields.includes(key) && (
 <div className="flex items-center gap-1 mt-2 text-amber-600 text-xs">
 <AlertTriangle className="w-3 h-3" />
 <span>敏感信息</span>
 </div>
 )}
 </div>
 ))}
 </div>
 </div>

 {/* 纱线配比 */}
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <h3 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
 <Package className="w-5 h-5 text-blue-500" />
 纱线配比
 </h3>
 <div className="space-y-3">
 {yarnRatios.map((yarn, idx) => (
 <div key={idx} className="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl">
 <div>
 <p className="font-medium text-gray-900">{yarn.yarn_name}</p>
 <p className="text-sm text-gray-500">配比: {yarn.ratio}%</p>
 </div>
 <div className="text-right">
 <p className="text-sm font-medium text-gray-900">{yarn.amount_per_meter} g/m</p>
 <p className="text-xs text-gray-500">总量: {yarn.total_amount.toLocaleString()} g</p>
 </div>
 </div>
 ))}
 </div>
 </div>

 {/* 入库记录 */}
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <h3 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
 <Database className="w-5 h-5 text-emerald-500" />
 入库记录（来自纺织厂）
 </h3>
 <div className="space-y-2">
 {inventoryRecords.map((record, idx) => (
 <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
 <div className="flex items-center gap-3">
 <span className="text-sm text-gray-500">{new Date(record.time).toLocaleDateString('zh-CN')}</span>
 <span className="text-sm font-medium text-gray-900">{record.factory}</span>
 </div>
 <div className="text-sm">
 <span className="text-emerald-600 font-medium">{record.meters}米</span>
 <span className="text-gray-400 mx-2">/</span>
 <span className="text-gray-600">{record.rolls}匹/件</span>
 </div>
 </div>
 ))}
 </div>
 </div>
 </motion.div>
 )}

 {/* 纺织厂视角 */}
 {activeTab === 'textile' && (
 <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-6">
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <div className="flex items-center gap-3 mb-6">
 <div className="w-12 h-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center">
 <Factory className="w-6 h-6 text-white" />
 </div>
 <div>
 <h2 className="text-lg font-bold text-gray-900">纺织厂可见数据</h2>
 <p className="text-sm text-gray-500">敏感信息已被隐藏，仅显示生产相关信息</p>
 </div>
 </div>

 {/* 敏感信息提示 */}
 <div className="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-6 flex items-center gap-3">
 <AlertTriangle className="w-5 h-5 text-amber-600" />
 <p className="text-sm text-amber-700">
 以下字段已被隐藏：<span className="font-medium">成品名称、颜色、色号</span>
 </p>
 </div>

 <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
 {visibleFields.map(key => (
 <div key={key} className="p-4 bg-emerald-50 border border-emerald-200 rounded-xl">
 <p className="text-xs text-gray-500 mb-1">
 {key === 'plan_code' && '计划编号'}
 {key === 'fabric_code' && '坯布识别码'}
 {key === 'target_quantity' && '计划产量'}
 {key === 'yarn_usage_per_meter' && '每米布纱用量'}
 {key === 'production_price' && '生产采购价'}
 {key === 'remark' && '备注'}
 </p>
 <p className="font-medium text-gray-900">
 {key === 'target_quantity' ? `${fullPlanData[key as keyof typeof fullPlanData]} 米` : 
 key === 'yarn_usage_per_meter' ? `${fullPlanData[key as keyof typeof fullPlanData]} g/m` :
 key === 'production_price' ? `¥${fullPlanData[key as keyof typeof fullPlanData]}/米` : 
 fullPlanData[key as keyof typeof fullPlanData]}
 </p>
 <div className="flex items-center gap-1 mt-2 text-emerald-600 text-xs">
 <CheckCircle className="w-3 h-3" />
 <span>可见</span>
 </div>
 </div>
 ))}
 </div>

 {/* 隐藏的字段展示 */}
 <div className="mt-6 pt-6 border-t border-gray-200">
 <p className="text-sm font-medium text-gray-700 mb-3">已隐藏的敏感字段：</p>
 <div className="flex gap-3">
 {sensitiveFields.map(field => (
 <div key={field} className="flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-lg">
 <EyeOff className="w-4 h-4 text-gray-400" />
 <span className="text-sm text-gray-500">
 {field === 'product_name' && '成品名称'}
 {field === 'color' && '颜色'}
 {field === 'color_code' && '色号'}
 </span>
 </div>
 ))}
 </div>
 </div>
 </div>

 {/* 纱线配比（可见） */}
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <h3 className="font-semibold text-gray-900 mb-4 flex items-center gap-2">
 <Package className="w-5 h-5 text-emerald-500" />
 纱线配比（生产必需）
 </h3>
 <div className="space-y-3">
 {yarnRatios.map((yarn, idx) => (
 <div key={idx} className="flex items-center justify-between p-4 bg-gradient-to-r from-emerald-50 to-green-50 rounded-xl">
 <div>
 <p className="font-medium text-gray-900">{yarn.yarn_name}</p>
 <p className="text-sm text-gray-500">配比: {yarn.ratio}%</p>
 </div>
 <div className="text-right">
 <p className="text-sm font-medium text-gray-900">{yarn.amount_per_meter} g/m</p>
 <p className="text-xs text-gray-500">总量: {yarn.total_amount.toLocaleString()} g</p>
 </div>
 </div>
 ))}
 </div>
 </div>
 </motion.div>
 )}

 {/* 数据流向 */}
 {activeTab === 'flow' && (
 <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-6">
 {/* 加密机制说明 */}
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <div 
 className="flex items-center justify-between cursor-pointer"
 onClick={() => toggleSection('encryption')}
 >
 <div className="flex items-center gap-3">
 <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-violet-500 rounded-lg flex items-center justify-center">
 <Lock className="w-5 h-5 text-white" />
 </div>
 <h3 className="font-semibold text-gray-900">分享链接加密机制</h3>
 </div>
 <ChevronDown className={`w-5 h-5 text-gray-400 transition-transform ${expandedSection === 'encryption' ? 'rotate-180' : ''}`} />
 </div>
 
 <AnimatePresence>
 {expandedSection === 'encryption' && (
 <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="mt-4 pt-4 border-t border-gray-100">
 <div className="space-y-4">
 <div className="flex items-center gap-4">
 <div className="flex-1 p-4 bg-gray-50 rounded-lg">
 <p className="text-xs text-gray-500 mb-1">原始数据</p>
 <code className="text-sm text-gray-700">{`{ planId: "${fullPlanData.id}", factoryType: "textile", ts: ${Date.now()} }`}</code>
 </div>
 <ChevronRight className="w-5 h-5 text-gray-400" />
 <div className="flex-1 p-4 bg-blue-50 rounded-lg">
 <p className="text-xs text-gray-500 mb-1">Base64编码</p>
 <code className="text-sm text-gray-700 break-all">eyJwbGFuSWQiOiJwbGFuLTEyMyIsImZhY3RvcnlUeXBlIjoidGV4dGlsZSIsInRzIjoxNzI2MjY1MDQ5ODU2fQ...</code>
 </div>
 </div>
 <div className="flex items-center gap-4">
 <div className="flex-1 p-4 bg-amber-50 rounded-lg">
 <p className="text-xs text-gray-500 mb-1">加盐混淆</p>
 <code className="text-sm text-gray-700 break-all">procurement2026...eyJwbGFuSWQiOiJwbGFuLTEyMyI...26</code>
 </div>
 <ChevronRight className="w-5 h-5 text-gray-400" />
 <div className="flex-1 p-4 bg-emerald-50 rounded-lg">
 <p className="text-xs text-gray-500 mb-1">字符串反转</p>
 <code className="text-sm text-gray-700 break-all">62...procurement2026</code>
 </div>
 </div>
 <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
 <p className="text-xs text-purple-600 mb-1">最终分享链接</p>
 <code className="text-sm text-purple-700 break-all">/#/import?token=62...procurement2026</code>
 </div>
 </div>
 </motion.div>
 )}
 </AnimatePresence>
 </div>

 {/* 数据流向图 */}
 <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
 <h3 className="font-semibold text-gray-900 mb-6 flex items-center gap-2">
 <Share2 className="w-5 h-5 text-blue-500" />
 数据共享流程
 </h3>
 
 <div className="relative">
 {/* 步骤1: 采购商创建 */}
 <div className="flex items-start gap-4 mb-8">
 <div className="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center flex-shrink-0">
 <Building2 className="w-6 h-6 text-white" />
 </div>
 <div className="flex-1">
 <h4 className="font-medium text-gray-900">1. 采购商创建计划</h4>
 <p className="text-sm text-gray-500 mt-1">填写完整产品信息，包括敏感字段（成品名称、颜色、色号）</p>
 <div className="mt-3 flex gap-2">
 <span className="px-2 py-1 bg-amber-100 text-amber-700 text-xs rounded">水洗棉花糖</span>
 <span className="px-2 py-1 bg-amber-100 text-amber-700 text-xs rounded">灰色</span>
 <span className="px-2 py-1 bg-amber-100 text-amber-700 text-xs rounded">色号01</span>
 </div>
 </div>
 </div>

 {/* 步骤2: 生成分享链接 */}
 <div className="flex items-start gap-4 mb-8">
 <div className="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center flex-shrink-0">
 <Link2 className="w-6 h-6 text-white" />
 </div>
 <div className="flex-1">
 <h4 className="font-medium text-gray-900">2. 生成加密分享链接</h4>
 <p className="text-sm text-gray-500 mt-1">仅包含 planId 和 factoryType，不包含任何敏感信息</p>
 <div className="mt-3 p-3 bg-gray-100 rounded-lg">
 <code className="text-xs text-gray-600 break-all">/#/import?token=62eyJw...</code>
 </div>
 </div>
 </div>

 {/* 步骤3: 纺织厂导入 */}
 <div className="flex items-start gap-4 mb-8">
 <div className="w-12 h-12 bg-emerald-500 rounded-xl flex items-center justify-center flex-shrink-0">
 <Factory className="w-6 h-6 text-white" />
 </div>
 <div className="flex-1">
 <h4 className="font-medium text-gray-900">3. 纺织厂导入计划</h4>
 <p className="text-sm text-gray-500 mt-1">通过链接导入，只能看到生产相关信息</p>
 <div className="mt-3 flex gap-2">
 <span className="px-2 py-1 bg-emerald-100 text-emerald-700 text-xs rounded">坯布码: SX1</span>
 <span className="px-2 py-1 bg-emerald-100 text-emerald-700 text-xs rounded">产量: 10000米</span>
 <span className="px-2 py-1 bg-gray-100 text-gray-400 text-xs rounded line-through">成品名称</span>
 </div>
 </div>
 </div>

 {/* 步骤4: 数据同步 */}
 <div className="flex items-start gap-4">
 <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-emerald-500 rounded-xl flex items-center justify-center flex-shrink-0">
 <Database className="w-6 h-6 text-white" />
 </div>
 <div className="flex-1">
 <h4 className="font-medium text-gray-900">4. 入库数据双向同步</h4>
 <p className="text-sm text-gray-500 mt-1">纺织厂入库后，数据实时同步到采购商仓库</p>
 <div className="mt-3 flex items-center gap-4">
 <div className="flex items-center gap-2 text-sm text-gray-600">
 <Factory className="w-4 h-4" />
 <span>纺织厂入库</span>
 </div>
 <ChevronRight className="w-4 h-4 text-gray-400" />
 <div className="flex items-center gap-2 text-sm text-gray-600">
 <Building2 className="w-4 h-4" />
 <span>采购商可见</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

 {/* 安全策略总结 */}
 <div className="bg-gradient-to-r from-slate-800 to-slate-900 rounded-2xl shadow-lg p-6 text-white">
 <h3 className="font-semibold mb-4 flex items-center gap-2">
 <Shield className="w-5 h-5" />
 安全策略总结
 </h3>
 <div className="grid grid-cols-2 gap-4">
 <div className="p-4 bg-white/10 rounded-xl">
 <p className="text-sm font-medium mb-1">链接加密</p>
 <p className="text-xs text-gray-300">Base64 + 盐值 + 反转，防止直接暴露ID</p>
 </div>
 <div className="p-4 bg-white/10 rounded-xl">
 <p className="text-sm font-medium mb-1">字段过滤</p>
 <p className="text-xs text-gray-300">导入页面不展示成品名称、颜色、色号</p>
 </div>
 <div className="p-4 bg-white/10 rounded-xl">
 <p className="text-sm font-medium mb-1">RLS策略</p>
 <p className="text-xs text-gray-300">基于company_id的数据隔离</p>
 </div>
 <div className="p-4 bg-white/10 rounded-xl">
 <p className="text-sm font-medium mb-1">角色校验</p>
 <p className="text-xs text-gray-300">导入时验证用户角色与链接类型匹/件配</p>
 </div>
 </div>
 </div>
 </motion.div>
 )}
 </div>
 </div>
 );
}
