'use client'

import React, { useState } from 'react'
import {
Search,
Upload,
FileText,
ShieldCheck,
BrainCircuit,
Settings,
Bell,
ChevronRight,
Database
} from 'lucide-react'

// רשימת מסמכים לדוגמה (Mock Data)
const DOCUMENTS = [
{ id: 1, title: 'נוהל בטיחות אש 2026', category: 'בטיחות', date: '24/03/2026', type: 'PDF' },
{ id: 2, title: 'מדריך תפעול מכונה FCC-4', category: 'תפעול', date: '15/03/2026', type: 'DOC' },
{ id: 3, title: 'פרוטוקול תחזוקת שסתומים', category: 'תחזוקה', date: '02/03/2026', type: 'PDF' },
]

export default function AIDashboard() {
const [search, setSearch] = useState('')

return (
<div className="flex min-h-screen bg-[#F8FAFC] text-right" dir="rtl">

  {/* Sidebar - ניווט צד מקצועי */}  
  <aside className="w-72 bg-[#0F172A] text-white p-6 flex flex-col hidden lg:flex">  
    <div className="flex items-center gap-3 mb-10 px-2">  
      <div className="bg-blue-500 p-2 rounded-lg">  
        <BrainCircuit size={24} />  
      </div>  
      <span className="text-xl font-bold tracking-tight">Enterprise AI</span>  
    </div>  

    <nav className="space-y-2 flex-1">  
      <NavItem icon={<FileText size={20}/>} label="מאגר מסמכים" active />  
      <NavItem icon={<Upload size={20}/>} label="העלאת תוכן" />  
      <NavItem icon={<Database size={20}/>} label="ניהול Database" />  
      <NavItem icon={<ShieldCheck size={20}/>} label="הרשאות בטיחות" />  
    </nav>  

    <div className="pt-6 border-t border-slate-800">  
      <NavItem icon={<Settings size={20}/>} label="הגדרות מערכת" />  
    </div>  
  </aside>  

  {/* Main Content */}  
  <main className="flex-1 flex flex-col">  
      
    {/* Top Header */}  
    <header className="h-20 bg-white border-b border-slate-200 flex items-center justify-between px-8 sticky top-0 z-10">  
      <div className="relative w-full max-w-xl">  
        <Search className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />  
        <input   
          type="text"   
          placeholder="שאל את ה-AI על נהלי העבודה (למשל: מה עושים בזמן דליפה?)"   
          className="w-full pr-12 pl-4 py-2.5 bg-slate-100 border-none rounded-xl focus:ring-2 focus:ring-blue-500 outline-none transition text-sm"  
          value={search}  
          onChange={(e) => setSearch(e.target.value)}  
        />  
      </div>  
        
      <div className="flex items-center gap-4">  
        <button className="p-2 text-slate-500 hover:bg-slate-100 rounded-full transition relative">  
          <Bell size={20} />  
          <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>  
        </button>  
        <div className="h-8 w-[1px] bg-slate-200 mx-2"></div>  
        <div className="flex items-center gap-3">  
          <div className="text-left">  
            <p className="text-sm font-semibold text-slate-900 leading-none text-left">מפעיל מערכת</p>  
            <p className="text-xs text-slate-500 mt-1">Admin Access</p>  
          </div>  
          <div className="h-10 w-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-bold">  
            OP  
          </div>  
        </div>  
      </div>  
    </header>  

    {/* Dashboard Body */}  
    <div className="p-8 max-w-7xl mx-auto w-full space-y-8">  
        
      {/* Hero Section / AI Summary */}  
      <div className="bg-gradient-to-l from-blue-600 to-indigo-700 rounded-3xl p-8 text-white shadow-xl shadow-blue-200 relative overflow-hidden">  
        <div className="relative z-10">  
          <h2 className="text-2xl font-bold mb-2">בוקר טוב, מוכן לאופטימיזציה?</h2>  
          <p className="text-blue-100 max-w-md opacity-90">  
            מנוע ה-AI סינכרן הבוקר 14 מסמכים חדשים. ניתן לשאול שאלות על נהלי ה-FCC והתחזוקה המעודכנים.  
          </p>  
          <button className="mt-6 bg-white text-blue-600 px-6 py-2.5 rounded-xl font-bold text-sm hover:bg-blue-50 transition shadow-lg">  
            התחל צ'אט חכם  
          </button>  
        </div>  
        <BrainCircuit className="absolute -left-10 -bottom-10 w-64 h-64 text-white/10 rotate-12" />  
      </div>  

      {/* Quick Stats */}  
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">  
        <StatCard label="מסמכים במאגר" value="1,248" color="blue" />  
        <StatCard label="שאילתות AI היום" value="84" color="indigo" />  
        <StatCard label="דיוק מודל" value="99.2%" color="emerald" />  
      </div>  

      {/* Documents Table */}  
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">  
        <div className="p-6 border-b border-slate-100 flex justify-between items-center">  
          <h3 className="text-lg font-bold text-slate-800">מסמכים אחרונים שנוספו</h3>  
          <button className="text-blue-600 text-sm font-medium hover:underline flex items-center gap-1">  
            צפה בכל המאגר <ChevronRight size={16} />  
          </button>  
        </div>  
        <table className="w-full text-right border-collapse">  
          <thead>  
            <tr className="bg-slate-50 text-slate-500 text-sm uppercase">  
              <th className="p-4 font-medium">שם המסמך</th>  
              <th className="p-4 font-medium">קטגוריה</th>  
              <th className="p-4 font-medium text-center">תאריך עדכון</th>  
              <th className="p-4 font-medium text-center">פורמט</th>  
            </tr>  
          </thead>  
          <tbody className="divide-y divide-slate-100">  
            {DOCUMENTS.map((doc) => (  
              <tr key={doc.id} className="hover:bg-slate-50/80 transition group">  
                <td className="p-4 font-medium text-slate-700 flex items-center gap-3">  
                  <div className="p-2 bg-blue-50 text-blue-600 rounded-lg group-hover:bg-blue-100 transition">  
                    <FileText size={18} />  
                  </div>  
                  {doc.title}  
                </td>  
                <td className="p-4 text-slate-500 text-sm">  
                  <span className="bg-slate-100 px-3 py-1 rounded-full">{doc.category}</span>  
                </td>  
                <td className="p-4 text-slate-500 text-sm text-center">{doc.date}</td>  
                <td className="p-4 text-center">  
                  <span className="text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded border border-red-100">  
                    {doc.type}  
                  </span>  
                </td>  
              </tr>  
            ))}  
          </tbody>  
        </table>  
      </div>  
    </div>  
  </main>  
</div>  

)
}

// רכיבי עזר קטנים
function NavItem({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) {
return (
<button className={w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${ active ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/20' : 'text-slate-400 hover:bg-slate-800 hover:text-white' }}>
{icon}
<span className="font-medium text-sm">{label}</span>
</button>
)
}

function StatCard({ label, value, color }: { label: string, value: string, color: string }) {
const colors: any = {
blue: 'text-blue-600 bg-blue-50',
indigo: 'text-indigo-600 bg-indigo-50',
emerald: 'text-emerald-600 bg-emerald-50'
}
return (
<div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
<p className="text-sm text-slate-500 mb-1">{label}</p>
<p className={text-2xl font-bold ${colors[color].split(' ')[0]}}>{value}</p>
<div className={mt-3 h-1.5 w-full rounded-full ${colors[color].split(' ')[1]}}>
<div className={h-full rounded-full bg-current w-2/3 ${colors[color].split(' ')[0]}}></div>
</div>
</div>
)
}