import React, { useEffect, useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import {
  Building2,
  CalendarCheck,
  Crown,
  FileText,
  LayoutDashboard,
  LogOut,
  Shield,
  User,
  Users,
  WalletCards,
  BriefcaseBusiness,
  ClipboardCheck,
  Settings,
  BarChart3,
  Clock3,
  PackageCheck
} from 'lucide-react';
import './styles.css';

const API_URL = import.meta.env.VITE_API_URL || 'http://127.0.0.1:4000/api';

const roleMeta = {
  admin: { label: 'لوحة الأدمن', icon: Shield, color: 'purple' },
  client: { label: 'لوحة العميل', icon: User, color: 'blue' },
  company: { label: 'لوحة الشركة', icon: Building2, color: 'green' },
  employee: { label: 'لوحة الموظف', icon: BriefcaseBusiness, color: 'orange' }
};

const demoAccounts = [
  ['admin@hr.test', 'أدمن'],
  ['client@hr.test', 'عميل'],
  ['company@hr.test', 'شركة'],
  ['employee@hr.test', 'موظف']
];

function useApi(token) {
  return useMemo(() => ({
    async get(path) {
      const res = await fetch(`${API_URL}${path}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error((await res.json()).message || 'API error');
      return res.json();
    },
    async post(path, body) {
      const res = await fetch(`${API_URL}${path}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(body)
      });
      if (!res.ok) throw new Error((await res.json()).message || 'API error');
      return res.json();
    }
  }), [token]);
}

function App() {
  const [session, setSession] = useState(() => {
    const saved = localStorage.getItem('hr-session');
    return saved ? JSON.parse(saved) : null;
  });

  function saveSession(next) {
    setSession(next);
    if (next) localStorage.setItem('hr-session', JSON.stringify(next));
    else localStorage.removeItem('hr-session');
  }

  if (!session) return <Login onLogin={saveSession} />;

  return <Shell session={session} onLogout={() => saveSession(null)} />;
}

function Login({ onLogin }) {
  const [email, setEmail] = useState('admin@hr.test');
  const [password, setPassword] = useState('Password123!');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  async function submit(event) {
    event.preventDefault();
    setLoading(true);
    setError('');
    try {
      const res = await fetch(`${API_URL}/auth/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.message);
      onLogin(data);
    } catch (err) {
      setError(err.message || 'تعذر تسجيل الدخول');
    } finally {
      setLoading(false);
    }
  }

  return (
    <main className="login-page">
      <section className="login-hero">
        <div>
          <span className="eyebrow">HR SaaS</span>
          <h1>نظام موارد بشرية متكامل</h1>
          <p>اشتراكات، شركات متعددة، موظفون، حضور، رواتب، طلبات، مقابلات وتقارير في تجربة عربية احترافية.</p>
        </div>
      </section>
      <form className="login-card" onSubmit={submit}>
        <div className="brand-mark"><Crown size={30} /></div>
        <h2>تسجيل الدخول</h2>
        <label>البريد الإلكتروني</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} dir="ltr" />
        <label>كلمة المرور</label>
        <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" dir="ltr" />
        {error && <p className="error">{error}</p>}
        <button disabled={loading}>{loading ? 'جاري الدخول...' : 'دخول النظام'}</button>
        <div className="demo-grid">
          {demoAccounts.map(([account, label]) => (
            <button type="button" key={account} onClick={() => setEmail(account)}>
              {label}
            </button>
          ))}
        </div>
      </form>
    </main>
  );
}

function Shell({ session, onLogout }) {
  const [activeRole, setActiveRole] = useState(session.user.role);
  const roles = session.user.role === 'admin' ? ['admin', 'client', 'company', 'employee'] : [session.user.role];
  const MetaIcon = roleMeta[activeRole].icon;

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <div className="logo"><Crown /> <span>HR System</span></div>
        <nav>
          {roles.map((role) => {
            const Icon = roleMeta[role].icon;
            return (
              <button className={activeRole === role ? 'active' : ''} key={role} onClick={() => setActiveRole(role)}>
                <Icon size={20} /> {roleMeta[role].label}
              </button>
            );
          })}
        </nav>
        <button className="logout" onClick={onLogout}><LogOut size={18} /> خروج</button>
      </aside>
      <main className={`workspace ${roleMeta[activeRole].color}`}>
        <header className="topbar">
          <div>
            <span className="eyebrow">مرحباً، {session.user.name}</span>
            <h1><MetaIcon /> {roleMeta[activeRole].label}</h1>
          </div>
          <div className="status-pill">متعدد المستأجرين</div>
        </header>
        <Dashboard role={activeRole} token={session.token} />
      </main>
    </div>
  );
}

function Dashboard({ role, token }) {
  const api = useApi(token);
  const [data, setData] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    setData(null);
    setError('');
    api.get(`/dashboard/${role}`).then(setData).catch((err) => setError(err.message));
  }, [api, role]);

  if (error) return <div className="notice">{error}</div>;
  if (!data) return <div className="notice">جاري تحميل البيانات...</div>;

  if (role === 'admin') return <AdminDashboard data={data} />;
  if (role === 'client') return <ClientDashboard data={data} />;
  if (role === 'company') return <CompanyDashboard data={data} />;
  return <EmployeeDashboard data={data} api={api} onRefresh={() => api.get('/dashboard/employee').then(setData)} />;
}

function StatGrid({ items }) {
  return <section className="stats-grid">{items.map((item) => <Stat key={item.label} {...item} />)}</section>;
}

function Stat({ icon: Icon, label, value }) {
  return (
    <article className="stat-card">
      <Icon size={22} />
      <span>{label}</span>
      <strong>{value ?? 0}</strong>
    </article>
  );
}

function AdminDashboard({ data }) {
  return (
    <>
      <StatGrid items={[
        { icon: Users, label: 'العملاء', value: data.stats.clients },
        { icon: Building2, label: 'الشركات', value: data.stats.companies },
        { icon: User, label: 'المستخدمون', value: data.stats.users },
        { icon: WalletCards, label: 'الاشتراكات', value: data.stats.subscriptions },
        { icon: BarChart3, label: 'فرص المبيعات', value: data.stats.openLeads }
      ]} />
      <ToolSections sections={adminSections} />
      <DataPanel title="العملاء والاشتراكات" columns={['العميل', 'البريد', 'الخطة', 'الحالة']} rows={data.clients.map((client) => [client.name, client.email, client.plan_name || '-', client.subscription_status || client.status])} />
      <DataPanel title="CRM المبيعات" columns={['الشركة', 'المسؤول', 'المرحلة', 'الحالة']} rows={data.leads.map((lead) => [lead.company_name, lead.contact_name, lead.stage, lead.status])} />
    </>
  );
}

function ClientDashboard({ data }) {
  return (
    <>
      <StatGrid items={[
        { icon: Building2, label: 'الشركات', value: data.stats.companies },
        { icon: Users, label: 'المستخدمون', value: data.stats.users },
        { icon: User, label: 'الموظفون', value: data.stats.employees },
        { icon: WalletCards, label: 'الاشتراك', value: data.stats.subscriptionStatus || '-' }
      ]} />
      <ToolSections sections={clientSections} />
      <DataPanel title="الشركات التابعة للعميل" columns={['اسم الشركة', 'النشاط', 'المستخدمون', 'الموظفون', 'الحالة']} rows={data.companies.map((company) => [company.name, company.industry, company.users_count, company.employees_count, company.status])} />
      {data.subscription && <SubscriptionCard subscription={data.subscription} />}
    </>
  );
}

function CompanyDashboard({ data }) {
  return (
    <>
      <StatGrid items={[
        { icon: Users, label: 'الموظفون', value: data.stats.employees },
        { icon: FileText, label: 'طلبات معلقة', value: data.stats.pendingRequests },
        { icon: CalendarCheck, label: 'مقابلات', value: data.stats.interviews },
        { icon: WalletCards, label: 'رواتب الشهر', value: `${Number(data.stats.payroll || 0).toLocaleString()} ر.س` }
      ]} />
      <ToolSections sections={companySections} />
      <DataPanel title="الموظفون" columns={['الكود', 'الاسم', 'المسمى', 'القسم', 'الحالة']} rows={data.employees.map((employee) => [employee.employee_code, employee.name, employee.job_title, employee.department, employee.status])} />
      <DataPanel title="طلبات الموظفين" columns={['الموظف', 'الطلب', 'النوع', 'الحالة']} rows={data.requests.map((request) => [request.employee_name, request.title, request.type, request.status])} />
    </>
  );
}

function EmployeeDashboard({ data, api, onRefresh }) {
  const [title, setTitle] = useState('');
  const [type, setType] = useState('leave');
  const [message, setMessage] = useState('');

  async function submitRequest(event) {
    event.preventDefault();
    setMessage('');
    await api.post('/requests', { title, type });
    setTitle('');
    setMessage('تم إرسال الطلب بنجاح');
    onRefresh();
  }

  return (
    <>
      <StatGrid items={[
        { icon: User, label: 'الموظف', value: data.employee.name },
        { icon: BriefcaseBusiness, label: 'المسمى', value: data.employee.job_title },
        { icon: Clock3, label: 'سجلات حضور', value: data.attendance.length },
        { icon: PackageCheck, label: 'العهد', value: data.assets.length }
      ]} />
      <ToolSections sections={employeeSections} />
      <section className="form-panel">
        <h2>طلب جديد</h2>
        <form onSubmit={submitRequest}>
          <select value={type} onChange={(e) => setType(e.target.value)}>
            <option value="leave">إجازة</option>
            <option value="loan">سلفة</option>
            <option value="letter">خطاب</option>
            <option value="other">أخرى</option>
          </select>
          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="عنوان الطلب" required />
          <button>إرسال</button>
        </form>
        {message && <p className="success">{message}</p>}
      </section>
      <DataPanel title="طلباتي" columns={['العنوان', 'النوع', 'الحالة', 'التاريخ']} rows={data.requests.map((request) => [request.title, request.type, request.status, request.requested_at])} />
      <DataPanel title="الحضور والانصراف" columns={['التاريخ', 'الدخول', 'الخروج', 'الحالة']} rows={data.attendance.map((item) => [item.work_date, item.check_in || '-', item.check_out || '-', item.status])} />
    </>
  );
}

function ToolSections({ sections }) {
  return (
    <section className="tool-sections">
      {sections.map((section) => (
        <div className="tool-band" key={section.title}>
          <h2>{section.title}</h2>
          <div className="tool-grid">
            {section.items.map((item) => {
              const Icon = item.icon;
              return <button className="tool" key={item.label}><Icon size={20} /><span>{item.label}</span></button>;
            })}
          </div>
        </div>
      ))}
    </section>
  );
}

function DataPanel({ title, columns, rows }) {
  return (
    <section className="data-panel">
      <h2>{title}</h2>
      <div className="table-wrap">
        <table>
          <thead><tr>{columns.map((col) => <th key={col}>{col}</th>)}</tr></thead>
          <tbody>
            {rows.map((row, index) => <tr key={index}>{row.map((cell, cellIndex) => <td key={cellIndex}>{cell}</td>)}</tr>)}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function SubscriptionCard({ subscription }) {
  return (
    <section className="subscription">
      <h2>تفاصيل الاشتراك</h2>
      <div><strong>{subscription.plan_name}</strong><span>{subscription.status}</span></div>
      <p>{Number(subscription.price).toLocaleString()} ر.س / حد الشركات {subscription.company_limit} / حد الموظفين {subscription.employee_limit}</p>
      <progress value="62" max="100" />
    </section>
  );
}

const adminSections = [
  { title: 'إدارة النظام', items: [{ label: 'العملاء', icon: Users }, { label: 'الشركات', icon: Building2 }, { label: 'المستخدمون', icon: User }, { label: 'الأدوار', icon: Shield }, { label: 'السجلات', icon: FileText }] },
  { title: 'الاشتراكات والفواتير', items: [{ label: 'خطط الاشتراك', icon: WalletCards }, { label: 'الفواتير', icon: FileText }, { label: 'المدفوعات', icon: ClipboardCheck }, { label: 'التقارير المالية', icon: BarChart3 }] }
];

const clientSections = [
  { title: 'إدارة الحساب والاشتراك', items: [{ label: 'بيانات شخصية', icon: User }, { label: 'إدارة الاشتراك', icon: WalletCards }, { label: 'الفواتير والمدفوعات', icon: FileText }, { label: 'تاريخ العمليات', icon: Clock3 }] },
  { title: 'إدارة الشركات', items: [{ label: 'إضافة شركة', icon: Building2 }, { label: 'قائمة الشركات', icon: Users }, { label: 'تقارير الشركات', icon: BarChart3 }, { label: 'إعدادات الشركة', icon: Settings }] }
];

const companySections = [
  { title: 'إدارة الشركة', items: [{ label: 'التسجيل', icon: ClipboardCheck }, { label: 'الإعدادات', icon: Settings }, { label: 'الإدارات', icon: Building2 }, { label: 'المستخدمون', icon: Users }] },
  { title: 'إدارة الموظفين', items: [{ label: 'قائمة الموظفين', icon: Users }, { label: 'إضافة موظف', icon: User }, { label: 'العقود', icon: FileText }, { label: 'الرواتب والسلف', icon: WalletCards }, { label: 'الحضور', icon: Clock3 }] },
  { title: 'العمليات', items: [{ label: 'الإجازات والطلبات', icon: CalendarCheck }, { label: 'الأصول', icon: PackageCheck }, { label: 'تقييم الموظفين', icon: BarChart3 }, { label: 'المقابلات', icon: BriefcaseBusiness }] }
];

const employeeSections = [
  { title: 'الملف الشخصي', items: [{ label: 'بياناتي', icon: User }, { label: 'الوظيفة', icon: BriefcaseBusiness }, { label: 'المستندات', icon: FileText }, { label: 'كلمة المرور', icon: Settings }] },
  { title: 'الخدمة الذاتية', items: [{ label: 'تسجيل حضور', icon: Clock3 }, { label: 'طلب إجازة', icon: CalendarCheck }, { label: 'طلب سلفة', icon: WalletCards }, { label: 'طلب خطاب', icon: FileText }, { label: 'الأصول المسندة', icon: PackageCheck }] }
];

createRoot(document.getElementById('root')).render(<App />);