import React, { useState, useEffect } from 'react';
import { 
  FileText, 
  Mic, 
  Image as ImageIcon, 
  CheckCircle, 
  Send, 
  Clock, 
  Search, 
  User, 
  Settings, 
  Menu, 
  X, 
  Sparkles, 
  ChevronRight, 
  ChevronLeft, 
  Save, 
  Download, 
  Upload, 
  MessageSquare,
  BarChart3,
  ThumbsUp,
  ThumbsDown,
  AlertCircle,
  FileInput
} from 'lucide-react';

// --- Mock Data & Constants ---

const MOCK_IDFS = [
  {
    id: 'IDF-2026-001',
    title: 'Adaptive Battery Management for EV Fleets',
    inventor: 'Sarah Chen',
    dateCreated: '2026-02-14',
    status: 'Pending Review',
    score: null,
    description: 'A system for optimizing battery charging cycles based on fleet route prediction.',
    problem: 'Current charging is static and degrades battery life.',
    solution: 'We use machine learning to predict daily usage and limit charge accordingly.',
    figures: ['sketch_01.jpg']
  },
  {
    id: 'IDF-2026-002',
    title: 'Holographic Display Overlay',
    inventor: 'Mike Ross',
    dateCreated: '2026-02-10',
    status: 'Approved',
    score: 85,
    description: 'Method for projecting 3D overlays on standard glass surfaces.',
    problem: 'AR requires expensive headsets.',
    solution: 'Micro-projectors embedded in the bezel with a specialized film.',
    figures: ['diagram_a.png']
  },
  {
    id: 'IDF-2026-003',
    title: 'Distributed Ledger for Supply Chain',
    inventor: 'Sarah Chen',
    dateCreated: '2026-01-22',
    status: 'Drafting',
    score: 92,
    description: 'Blockchain implementation for tracking pharmaceutical provenance.',
    problem: 'Counterfeit drugs entering the supply chain.',
    solution: 'Immutable ledger with IoT sensor integration.',
    figures: []
  }
];

const AI_SUGGESTIONS = {
  polish: "The disclosed embodiment relates to a system and method for adaptive battery management in electric vehicle fleets. Specifically, the system utilizes predictive machine learning algorithms to analyze historical route data and determine optimal charging thresholds, thereby extending battery longevity while ensuring operational readiness.",
  clarification: "Could you specify the type of machine learning model used? (e.g., Neural Network, Random Forest) and what specific input parameters are collected from the vehicle?"
};

// --- Components ---

const Button = ({ children, onClick, variant = 'primary', icon: Icon, className = '', disabled = false }) => {
  const baseStyle = "flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700 shadow-sm hover:shadow-md disabled:bg-blue-300",
    secondary: "bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 disabled:bg-slate-100",
    ghost: "text-slate-600 hover:bg-slate-100 disabled:text-slate-300",
    success: "bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm",
    danger: "bg-red-600 text-white hover:bg-red-700 shadow-sm",
    ai: "bg-gradient-to-r from-violet-600 to-indigo-600 text-white hover:from-violet-700 hover:to-indigo-700 shadow-md"
  };

  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      className={`${baseStyle} ${variants[variant]} ${className}`}
    >
      {Icon && <Icon size={18} className="mr-2" />}
      {children}
    </button>
  );
};

const Card = ({ children, className = '' }) => (
  <div className={`bg-white rounded-xl border border-slate-200 shadow-sm ${className}`}>
    {children}
  </div>
);

const Badge = ({ status }) => {
  const styles = {
    'Draft': 'bg-slate-100 text-slate-700',
    'Pending Review': 'bg-amber-100 text-amber-800',
    'Approved': 'bg-emerald-100 text-emerald-800',
    'Rejected': 'bg-red-100 text-red-800',
    'Drafting': 'bg-blue-100 text-blue-800'
  };
  return (
    <span className={`px-2.5 py-0.5 rounded-full text-xs font-semibold ${styles[status] || styles['Draft']}`}>
      {status}
    </span>
  );
};

// --- Main Application ---

export default function IIDPApp() {
  // State
  const [userRole, setUserRole] = useState(null); // 'inventor', 'reviewer', or null (login)
  const [activeTab, setActiveTab] = useState('dashboard');
  const [idfs, setIdfs] = useState(MOCK_IDFS);
  const [currentIdf, setCurrentIdf] = useState(null);
  
  // --- Login Screen ---
  if (!userRole) {
    return (
      <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
        <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 border border-slate-100">
          <div className="flex justify-center mb-6">
            <div className="h-16 w-16 bg-blue-600 rounded-2xl flex items-center justify-center shadow-lg transform rotate-3">
              <Sparkles className="text-white h-8 w-8" />
            </div>
          </div>
          <h1 className="text-2xl font-bold text-center text-slate-900 mb-2">StratIP Intelligent Platform</h1>
          <p className="text-center text-slate-500 mb-8">Secure Invention Disclosure & Review System</p>
          
          <div className="space-y-4">
            <button 
              onClick={() => setUserRole('inventor')}
              className="w-full p-4 border border-slate-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition-all flex items-center group"
            >
              <div className="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 group-hover:bg-blue-200">
                <User className="text-blue-600 h-5 w-5" />
              </div>
              <div className="text-left">
                <div className="font-semibold text-slate-900">Login as Inventor</div>
                <div className="text-sm text-slate-500">Submit new ideas & track status</div>
              </div>
            </button>
            
            <button 
              onClick={() => setUserRole('reviewer')}
              className="w-full p-4 border border-slate-200 rounded-xl hover:border-indigo-500 hover:bg-indigo-50 transition-all flex items-center group"
            >
              <div className="h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center mr-4 group-hover:bg-indigo-200">
                <CheckCircle className="text-indigo-600 h-5 w-5" />
              </div>
              <div className="text-left">
                <div className="font-semibold text-slate-900">Login as Reviewer</div>
                <div className="text-sm text-slate-500">Evaluate disclosures & IP strategy</div>
              </div>
            </button>
          </div>
          <p className="mt-8 text-center text-xs text-slate-400">© 2026 StratIP Technologies. All rights reserved.</p>
        </div>
      </div>
    );
  }

  // --- Main Layout ---
  return (
    <div className="flex h-screen bg-slate-50 text-slate-900 font-sans overflow-hidden">
      {/* Sidebar */}
      <aside className="w-64 bg-slate-900 text-slate-300 flex-shrink-0 hidden md:flex flex-col">
        <div className="p-6 flex items-center border-b border-slate-800">
          <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3">
            <Sparkles className="text-white h-5 w-5" />
          </div>
          <span className="font-bold text-white tracking-wide">StratIP</span>
        </div>
        
        <nav className="flex-1 p-4 space-y-1">
          <SidebarItem 
            icon={BarChart3} 
            label="Dashboard" 
            active={activeTab === 'dashboard' && !currentIdf} 
            onClick={() => { setActiveTab('dashboard'); setCurrentIdf(null); }} 
          />
          {userRole === 'inventor' && (
             <SidebarItem 
             icon={FileText} 
             label="New Disclosure" 
             active={activeTab === 'new'} 
             onClick={() => { setActiveTab('new'); setCurrentIdf(null); }} 
           />
          )}
          <SidebarItem icon={Clock} label="Recent Activity" />
          <SidebarItem icon={FileInput} label="Reports" />
        </nav>

        <div className="p-4 border-t border-slate-800">
          <div className="flex items-center mb-4">
            <div className="h-8 w-8 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold text-white">
              {userRole === 'inventor' ? 'SC' : 'MR'}
            </div>
            <div className="ml-3">
              <p className="text-sm font-medium text-white">{userRole === 'inventor' ? 'Sarah Chen' : 'Mike Ross'}</p>
              <p className="text-xs text-slate-500 capitalize">{userRole}</p>
            </div>
          </div>
          <button 
            onClick={() => setUserRole(null)}
            className="w-full flex items-center justify-center px-4 py-2 text-xs font-medium bg-slate-800 hover:bg-slate-700 rounded-md transition-colors"
          >
            Sign Out
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col overflow-hidden relative">
        {/* Header */}
        <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0 z-10">
          <div className="flex items-center md:hidden">
            <Menu className="h-6 w-6 text-slate-500 mr-4" />
            <span className="font-bold text-slate-900">StratIP</span>
          </div>
          <div className="hidden md:block">
            <h2 className="text-lg font-semibold text-slate-800">
              {activeTab === 'dashboard' ? 'Overview' : activeTab === 'new' ? 'New Invention Disclosure' : 'Disclosure Detail'}
            </h2>
          </div>
          <div className="flex items-center space-x-4">
            <div className="relative">
              <Search className="h-4 w-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
              <input 
                type="text" 
                placeholder="Search IDFs..." 
                className="pl-10 pr-4 py-2 text-sm border border-slate-200 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 w-64 bg-slate-50"
              />
            </div>
            <button className="p-2 text-slate-500 hover:bg-slate-100 rounded-full relative">
              <MessageSquare size={20} />
              <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full border border-white"></span>
            </button>
          </div>
        </header>

        {/* Scrollable Content Area */}
        <div className="flex-1 overflow-auto p-6 bg-slate-50/50">
          {currentIdf ? (
            // Detail View (Reviewer or Edit Mode)
            <IDFDetailView 
              idf={currentIdf} 
              userRole={userRole} 
              onBack={() => setCurrentIdf(null)} 
              onUpdate={(updated) => {
                setIdfs(idfs.map(i => i.id === updated.id ? updated : i));
                setCurrentIdf(updated);
              }}
            />
          ) : activeTab === 'new' ? (
            // New Wizard
            <NewIDFWizard 
              onCancel={() => setActiveTab('dashboard')} 
              onComplete={(newIdf) => {
                setIdfs([newIdf, ...idfs]);
                setActiveTab('dashboard');
              }}
            />
          ) : (
            // Dashboard List
            <DashboardView 
              idfs={idfs} 
              userRole={userRole}
              onSelectIdf={(idf) => setCurrentIdf(idf)}
            />
          )}
        </div>
      </main>
    </div>
  );
}

// --- Sub-Components ---

const SidebarItem = ({ icon: Icon, label, active, onClick }) => (
  <button 
    onClick={onClick}
    className={`w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${
      active ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'text-slate-400 hover:bg-slate-800 hover:text-white'
    }`}
  >
    <Icon size={18} className="mr-3" />
    {label}
  </button>
);

const DashboardView = ({ idfs, onSelectIdf, userRole }) => {
  const filteredIDFs = userRole === 'inventor' 
    ? idfs.filter(i => i.inventor === 'Sarah Chen') 
    : idfs; // Reviewer sees all

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <StatCard title="Total Disclosures" value={filteredIDFs.length} icon={FileText} color="blue" />
        <StatCard title="Pending Review" value={filteredIDFs.filter(i => i.status === 'Pending Review').length} icon={Clock} color="amber" />
        {userRole === 'reviewer' ? (
           <StatCard title="Avg Quality Score" value="88/100" icon={BarChart3} color="emerald" />
        ) : (
           <StatCard title="Approved" value={filteredIDFs.filter(i => i.status === 'Approved').length} icon={CheckCircle} color="emerald" />
        )}
      </div>

      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
          <h3 className="font-semibold text-slate-800">Recent Disclosures</h3>
          <button className="text-sm text-blue-600 font-medium hover:text-blue-700">View All</button>
        </div>
        <table className="w-full text-left">
          <thead className="bg-slate-50 text-slate-500 text-xs uppercase font-semibold">
            <tr>
              <th className="px-6 py-3">Docket ID</th>
              <th className="px-6 py-3">Title</th>
              <th className="px-6 py-3">Date</th>
              <th className="px-6 py-3">Status</th>
              {userRole === 'reviewer' && <th className="px-6 py-3">Score</th>}
              <th className="px-6 py-3 text-right">Action</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {filteredIDFs.map((idf) => (
              <tr key={idf.id} className="hover:bg-slate-50 transition-colors group cursor-pointer" onClick={() => onSelectIdf(idf)}>
                <td className="px-6 py-4 text-sm font-medium text-slate-600">{idf.id}</td>
                <td className="px-6 py-4 text-sm text-slate-900 font-medium">{idf.title}</td>
                <td className="px-6 py-4 text-sm text-slate-500">{idf.dateCreated}</td>
                <td className="px-6 py-4"><Badge status={idf.status} /></td>
                {userRole === 'reviewer' && (
                  <td className="px-6 py-4 text-sm font-semibold text-slate-700">
                    {idf.score ? idf.score : '-'}
                  </td>
                )}
                <td className="px-6 py-4 text-right">
                  <span className="text-blue-600 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                    {userRole === 'reviewer' ? 'Review' : 'View'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const StatCard = ({ title, value, icon: Icon, color }) => {
  const colorClasses = {
    blue: "bg-blue-100 text-blue-600",
    amber: "bg-amber-100 text-amber-600",
    emerald: "bg-emerald-100 text-emerald-600"
  };

  return (
    <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex items-center">
      <div className={`h-12 w-12 rounded-lg flex items-center justify-center mr-4 ${colorClasses[color]}`}>
        <Icon size={24} />
      </div>
      <div>
        <p className="text-slate-500 text-sm font-medium">{title}</p>
        <p className="text-2xl font-bold text-slate-800">{value}</p>
      </div>
    </div>
  );
};

// --- Wizard Component for New IDF ---

const NewIDFWizard = ({ onCancel, onComplete }) => {
  const [step, setStep] = useState(1);
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    title: '',
    problem: '',
    solution: '',
    figures: [],
    docket: `IDF-2026-0${Math.floor(Math.random() * 89) + 10}`
  });

  const handleNext = () => setStep(step + 1);
  const handleBack = () => setStep(step - 1);

  const AIPolish = ({ field, value }) => {
    const [isPolishing, setIsPolishing] = useState(false);
    
    const handlePolish = () => {
      setIsPolishing(true);
      setTimeout(() => {
        setFormData(prev => ({...prev, [field]: AI_SUGGESTIONS.polish}));
        setIsPolishing(false);
      }, 1500);
    };

    return (
      <button 
        onClick={handlePolish}
        disabled={!value || isPolishing}
        className="text-xs flex items-center text-violet-600 hover:text-violet-800 font-medium mt-1 disabled:opacity-50"
      >
        <Sparkles size={12} className={`mr-1 ${isPolishing ? 'animate-spin' : ''}`} />
        {isPolishing ? 'Optimizing language...' : 'Refine with Agentic AI'}
      </button>
    );
  };

  const steps = [
    { number: 1, title: "Basic Information" },
    { number: 2, title: "The Innovation" },
    { number: 3, title: "Drawings & Evidence" },
    { number: 4, title: "Review & Submit" }
  ];

  return (
    <div className="max-w-4xl mx-auto">
      {/* Wizard Progress */}
      <div className="mb-8 flex justify-between items-center relative">
        <div className="absolute top-1/2 left-0 w-full h-1 bg-slate-200 -z-10 rounded-full"></div>
        {steps.map((s) => (
          <div key={s.number} className="flex flex-col items-center bg-slate-50 px-2 z-10">
            <div className={`h-8 w-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300 ${
              step >= s.number 
                ? 'bg-blue-600 border-blue-600 text-white' 
                : 'bg-white border-slate-300 text-slate-400'
            }`}>
              {step > s.number ? <CheckCircle size={16} /> : s.number}
            </div>
            <span className={`text-xs mt-2 font-medium ${step >= s.number ? 'text-slate-800' : 'text-slate-400'}`}>
              {s.title}
            </span>
          </div>
        ))}
      </div>

      <Card className="p-8 min-h-[500px] flex flex-col relative overflow-hidden">
        {/* Step 1: Basics */}
        {step === 1 && (
          <div className="space-y-6 animate-fadeIn">
            <div>
              <h3 className="text-xl font-bold text-slate-800 mb-2">Let's start with the basics</h3>
              <p className="text-slate-500 mb-6">The system has auto-generated a docket number for you.</p>
            </div>
            
            <div className="grid grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">Docket Number</label>
                <input 
                  type="text" 
                  value={formData.docket} 
                  disabled 
                  className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg text-slate-500 font-mono"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">Date</label>
                <input 
                  type="date" 
                  value="2026-02-17" 
                  disabled 
                  className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg text-slate-500"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-slate-700 mb-2">Title of Invention</label>
              <input 
                type="text" 
                placeholder="e.g., Autonomous Drone Navigation via Lidar" 
                className="w-full p-3 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
                value={formData.title}
                onChange={(e) => setFormData({...formData, title: e.target.value})}
              />
            </div>
          </div>
        )}

        {/* Step 2: Innovation (AI Heavily Used Here) */}
        {step === 2 && (
          <div className="space-y-6 animate-fadeIn">
            <div className="flex justify-between items-start">
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-2">Describe the invention</h3>
                <p className="text-slate-500 text-sm">You can speak, upload a file, or type. The AI will format it.</p>
              </div>
              <div className="flex space-x-2">
                <Button variant="secondary" icon={Mic} className="text-xs">Record</Button>
                <Button variant="secondary" icon={Upload} className="text-xs">Upload Doc</Button>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">What problem does this solve?</label>
                <textarea 
                  className="w-full p-3 border border-slate-200 rounded-lg h-24 text-sm focus:ring-2 focus:ring-blue-500"
                  placeholder="Describe the issues with current technology..."
                  value={formData.problem}
                  onChange={(e) => setFormData({...formData, problem: e.target.value})}
                />
                <AIPolish field="problem" value={formData.problem} />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-2">What is your technical solution?</label>
                <div className="relative">
                  <textarea 
                    className="w-full p-3 border border-slate-200 rounded-lg h-40 text-sm focus:ring-2 focus:ring-blue-500"
                    placeholder="Describe how your invention works technically..."
                    value={formData.solution}
                    onChange={(e) => setFormData({...formData, solution: e.target.value})}
                  />
                  <div className="absolute bottom-3 right-3">
                     {/* Suggestion Bubble */}
                     {!formData.solution && (
                        <div className="bg-violet-50 text-violet-700 text-xs p-2 rounded-lg mb-2 shadow-sm border border-violet-100 max-w-xs animate-pulse">
                          AI Tip: Focus on the "How", not just the "What". Mention components and steps.
                        </div>
                     )}
                  </div>
                </div>
                <AIPolish field="solution" value={formData.solution} />
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Drawings */}
        {step === 3 && (
          <div className="space-y-6 animate-fadeIn">
            <div className="text-center py-12 border-2 border-dashed border-slate-300 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors cursor-pointer">
              <div className="mx-auto h-12 w-12 text-slate-400 mb-4">
                <ImageIcon size={48} />
              </div>
              <h3 className="text-lg font-medium text-slate-900">Drop sketches or diagrams here</h3>
              <p className="text-sm text-slate-500 mt-2">AI will process hand-drawn sketches into Visio-style blocks.</p>
              <Button variant="secondary" className="mt-6">Select Files</Button>
            </div>
            
            <div className="bg-blue-50 p-4 rounded-lg flex items-start">
              <Sparkles className="text-blue-600 mt-1 mr-3 flex-shrink-0" size={18} />
              <div>
                <h4 className="text-sm font-bold text-blue-800">Agentic Figure Assistant</h4>
                <p className="text-xs text-blue-700 mt-1">
                  Once you upload a sketch, I will automatically label the components (100, 110, 120) and generate a preliminary description of the drawings for the application.
                </p>
              </div>
            </div>
          </div>
        )}

        {/* Step 4: Review */}
        {step === 4 && (
          <div className="space-y-6 animate-fadeIn h-full flex flex-col">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-xl font-bold text-slate-800">Preview Disclosure</h3>
              <Badge status="Draft" />
            </div>

            <div className="bg-slate-50 p-6 rounded-lg border border-slate-200 flex-1 overflow-auto font-serif leading-relaxed text-slate-800 text-sm">
              <p className="font-bold mb-4 text-base">INVENTION DISCLOSURE FORM</p>
              
              <p><span className="font-bold">Docket:</span> {formData.docket}</p>
              <p><span className="font-bold">Title:</span> {formData.title || 'Untitled Invention'}</p>
              <br/>
              <p className="font-bold">I. TECHNICAL FIELD</p>
              <p className="mb-4">The present disclosure relates generally to the field of software architecture, and more specifically to...</p>
              
              <p className="font-bold">II. BACKGROUND</p>
              <p className="mb-4">{formData.problem || 'No problem description provided.'}</p>
              
              <p className="font-bold">III. DETAILED DESCRIPTION</p>
              <p className="mb-4">{formData.solution || 'No solution description provided.'}</p>
            </div>
          </div>
        )}

        {/* Footer Navigation */}
        <div className="mt-auto pt-8 border-t border-slate-100 flex justify-between">
          <Button variant="ghost" onClick={step === 1 ? onCancel : handleBack}>
             {step === 1 ? 'Cancel' : 'Back'}
          </Button>
          
          <div className="flex space-x-3">
             <Button variant="secondary" icon={Save}>Save Draft</Button>
             <Button 
               variant={step === 4 ? 'success' : 'primary'} 
               onClick={step === 4 ? () => onComplete({...formData, id: formData.docket, status: 'Pending Review', dateCreated: '2026-02-17', inventor: 'Sarah Chen'}) : handleNext}
               icon={step === 4 ? Send : ChevronRight}
             >
               {step === 4 ? 'Submit for Review' : 'Next Step'}
             </Button>
          </div>
        </div>
      </Card>
    </div>
  );
};

// --- Detailed View & Reviewer Panel ---

const IDFDetailView = ({ idf, userRole, onBack, onUpdate }) => {
  const [reviewTab, setReviewTab] = useState('content');
  const [comment, setComment] = useState('');
  
  return (
    <div className="max-w-6xl mx-auto flex flex-col h-full">
      <div className="flex items-center space-x-2 mb-6">
        <button onClick={onBack} className="text-slate-400 hover:text-slate-600 flex items-center text-sm">
          <ChevronLeft size={16} className="mr-1" /> Back to Dashboard
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-0">
        {/* Main Document Content */}
        <div className="lg:col-span-2 flex flex-col">
          <Card className="flex-1 flex flex-col overflow-hidden">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center bg-white sticky top-0 z-10">
              <div>
                 <h2 className="text-lg font-bold text-slate-900">{idf.title}</h2>
                 <p className="text-xs text-slate-500 font-mono">{idf.id} • v1.0</p>
              </div>
              <div className="flex space-x-2">
                <Button variant="secondary" icon={Download} className="text-xs px-2 py-1">PDF</Button>
                {userRole === 'inventor' && <Button variant="primary" className="text-xs px-2 py-1">Edit</Button>}
              </div>
            </div>
            
            <div className="p-8 overflow-auto bg-white">
               {/* Document Body */}
               <div className="prose prose-sm max-w-none text-slate-700">
                  <h3 className="text-slate-900">1. Problem Statement</h3>
                  <p>{idf.problem}</p>
                  
                  <h3 className="text-slate-900 mt-6">2. Proposed Solution</h3>
                  <p>{idf.description}</p>
                  <p className="mt-2">{idf.solution}</p>
                  
                  <div className="my-6 p-4 bg-slate-50 border border-slate-200 rounded-lg flex items-center justify-center min-h-[150px]">
                     <div className="text-center text-slate-400">
                        <ImageIcon className="mx-auto mb-2" />
                        <span className="text-xs">Figure 1: System Architecture (Processed)</span>
                     </div>
                  </div>

                  <h3 className="text-slate-900 mt-6">3. Alternatives Considered</h3>
                  <p>No alternatives provided by inventor.</p>
               </div>
            </div>
          </Card>
        </div>

        {/* Right Sidebar: Review & Actions */}
        <div className="lg:col-span-1 flex flex-col space-y-6">
          {/* Status Card */}
          <Card className="p-6">
            <div className="flex justify-between items-start mb-4">
              <span className="text-sm font-semibold text-slate-500">Current Status</span>
              <Badge status={idf.status} />
            </div>
            
            <div className="space-y-4">
              <div className="flex justify-between text-sm">
                 <span className="text-slate-500">Submitted:</span>
                 <span className="font-medium">{idf.dateCreated}</span>
              </div>
              <div className="flex justify-between text-sm">
                 <span className="text-slate-500">Inventor:</span>
                 <span className="font-medium">{idf.inventor}</span>
              </div>
            </div>
          </Card>

          {/* AI Analysis (Agentic Feature) */}
          <Card className="overflow-hidden">
             <div className="bg-gradient-to-r from-violet-600 to-indigo-600 p-4">
                <div className="flex items-center text-white mb-1">
                   <Sparkles size={16} className="mr-2" />
                   <h3 className="font-bold text-sm">Agentic Analysis</h3>
                </div>
                <p className="text-xs text-indigo-100 opacity-90">Automated pre-check against MPEP standards.</p>
             </div>
             <div className="p-4 bg-white space-y-4">
                <div>
                   <div className="flex justify-between text-xs font-semibold mb-1">
                      <span>Enablement Score</span>
                      <span className="text-emerald-600">High (92%)</span>
                   </div>
                   <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                      <div className="h-full bg-emerald-500 w-[92%]"></div>
                   </div>
                </div>
                <div>
                   <div className="flex justify-between text-xs font-semibold mb-1">
                      <span>Novelty Probability</span>
                      <span className="text-amber-600">Medium (64%)</span>
                   </div>
                   <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                      <div className="h-full bg-amber-500 w-[64%]"></div>
                   </div>
                </div>
                
                <div className="bg-amber-50 border border-amber-100 rounded-md p-3">
                   <div className="flex items-start">
                      <AlertCircle size={14} className="text-amber-600 mt-0.5 mr-2 flex-shrink-0" />
                      <p className="text-xs text-amber-800">
                         <strong>Gap Detected:</strong> The description mentions "Machine Learning" but lacks specific training data inputs. This may risk a 112 rejection.
                      </p>
                   </div>
                </div>
             </div>
          </Card>

          {/* Reviewer Actions (Only for Reviewer Role) */}
          {userRole === 'reviewer' && (
             <Card className="p-6 flex-1">
               <h3 className="font-bold text-slate-800 mb-4">Reviewer Decision</h3>
               
               <div className="space-y-4 mb-6">
                 <div>
                    <label className="text-xs font-bold text-slate-500 uppercase">Commercial Value (1-5)</label>
                    <div className="flex space-x-1 mt-1">
                       {[1,2,3,4,5].map(n => (
                         <button key={n} className="w-8 h-8 rounded-full border border-slate-200 hover:bg-blue-50 hover:border-blue-500 focus:bg-blue-600 focus:text-white transition-colors text-sm font-medium text-slate-600">
                           {n}
                         </button>
                       ))}
                    </div>
                 </div>
                 
                 <div>
                    <label className="text-xs font-bold text-slate-500 uppercase">Feedback</label>
                    <textarea 
                      className="w-full mt-1 p-2 border border-slate-200 rounded-md text-sm h-24"
                      placeholder="Enter feedback for the inventor..."
                      value={comment}
                      onChange={(e) => setComment(e.target.value)}
                    ></textarea>
                 </div>
               </div>

               <div className="grid grid-cols-2 gap-3">
                  <Button 
                    variant="danger" 
                    icon={ThumbsDown} 
                    onClick={() => onUpdate({...idf, status: 'Rejected', score: 45})}
                    className="w-full justify-center"
                  >
                     No Go
                  </Button>
                  <Button 
                    variant="success" 
                    icon={ThumbsUp} 
                    onClick={() => onUpdate({...idf, status: 'Approved', score: 88})}
                    className="w-full justify-center"
                  >
                     Approve
                  </Button>
               </div>
             </Card>
          )}

          {/* Chat/Collaboration */}
          <div className="bg-white border border-slate-200 rounded-xl p-4">
             <h3 className="text-sm font-bold text-slate-800 mb-3">Collaboration Log</h3>
             <div className="space-y-3">
                <div className="flex items-start space-x-2">
                   <div className="h-6 w-6 rounded-full bg-indigo-100 flex items-center justify-center text-xs text-indigo-700 font-bold">AI</div>
                   <div className="bg-slate-50 p-2 rounded-lg rounded-tl-none text-xs text-slate-600">
                      I asked the inventor to clarify the battery chemistry in section 2.
                   </div>
                </div>
                <div className="flex items-start space-x-2">
                   <div className="h-6 w-6 rounded-full bg-blue-100 flex items-center justify-center text-xs text-blue-700 font-bold">SC</div>
                   <div className="bg-blue-50 p-2 rounded-lg rounded-tl-none text-xs text-blue-800">
                      Updated the spec with Lithium-Iron-Phosphate details.
                   </div>
                </div>
             </div>
             <div className="mt-3 relative">
                <input type="text" placeholder="Add a comment..." className="w-full pl-3 pr-8 py-2 text-xs border border-slate-200 rounded-full" />
                <Send size={12} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
             </div>
          </div>

        </div>
      </div>
    </div>
  );
};