import React, { useState, useEffect, useCallback, useMemo } from 'react';
import './ScannerPage.css';
import scannerService from '../services/scannerService';
import { toast } from 'react-toastify';

/* ─── helpers ───────────────────────────────────────────────────── */
const timeAgo = (iso) => {
    if (!iso) return '–';
    const m = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
    if (m < 1) return 'gerade eben';
    if (m < 60) return `vor ${m} Min`;
    if (m < 1440) return `vor ${Math.floor(m / 60)} Std`;
    return `vor ${Math.floor(m / 1440)} Tagen`;
};

const inferType = (vendor = '', hostname = '') => {
    const v = vendor.toLowerCase(), h = hostname.toLowerCase();
    if (v.includes('kyocera') || v.includes('canon') || v.includes('ricoh') || v.includes('brother')) return 'printer';
    if (v.includes('ubiquiti') || v.includes('unifi') || v.includes('cisco') || v.includes('lancom') || v.includes('netgear') || h.match(/sw-\d|usw/)) return 'switch';
    if (v.includes('synology') || v.includes('qnap') || h.includes('nas') || h.includes('backup')) return 'nas';
    if (v.includes('vmware') || v.includes('proxmox') || v.includes('supermicro') || h.match(/(server|dc0|srv|-dc)/i)) return 'server';
    if (v.includes('apple') || v.includes('dell') || v.includes('lenovo') || v.includes('acer') || h.match(/(nb|pc|wks|laptop|desktop)/i)) return 'workstation';
    return 'iot';
};

const TYPE_CONFIG = {
    server:      { label:'Server',       tone:'blue',   icon:'<rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/>' },
    switch:      { label:'Switch',       tone:'teal',   icon:'<circle cx="12" cy="12" r="3"/><circle cx="12" cy="3" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="21" cy="12" r="2"/><circle cx="12" cy="21" r="2"/><path d="M12 9V5M9 12H5M19 12h-4M12 19v-4"/>' },
    printer:     { label:'Drucker',      tone:'orange', icon:'<polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>' },
    workstation: { label:'Workstation',  tone:'purple', icon:'<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' },
    nas:         { label:'NAS',          tone:'',       icon:'<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>' },
    ap:          { label:'Access Point', tone:'green',  icon:'<path d="M5 12.55a11 11 0 0 1 14 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/>' },
    iot:         { label:'IoT',          tone:'',       icon:'<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"/>' },
};

const MODULES = [
    { name:'ARP-Discovery',   detail:'Active ARP scan · /24',     icon:'<circle cx="12" cy="12" r="3"/><circle cx="12" cy="3" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="21" cy="12" r="2"/><circle cx="12" cy="21" r="2"/><path d="M12 9V5M9 12H5M19 12h-4M12 19v-4"/>',on:true,  status:'ok'  },
    { name:'DNS-Lookup',       detail:'Reverse PTR lookups',        icon:'<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>',                                                                                                                                               on:true,  status:'ok'  },
    { name:'SNMP',             detail:'Switches · Drucker',          icon:'<rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/>',                                                                           on:true,  status:'ok'  },
    { name:'MAC-Vendor',       detail:'OUI-Lookup Hersteller',      icon:'<path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 0-2-2V9m0 0h18"/>',                                                                                  on:true,  status:'ok'  },
    { name:'Site Monitoring',  detail:'Ping-Checks · Dienste',      icon:'<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',                                                                                                                                                       on:true,  status:'ok'  },
    { name:'Port-Scan',        detail:'TCP top-ports',               icon:'<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',                                                                                                                                                   on:true,  status:'ok'  },
    { name:'Nexus Reporter',   detail:'Sync → IT Nexus',             icon:'<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',                                                                                                                                                                     on:true,  status:'ok'  },
    { name:'AD-Sync',          detail:'Deaktiviert',                 icon:'<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>',                                                       on:false, status:'off' },
];

const SPARKLINE = [30,38,34,48,54,60,68,74,82,88,92];
const SITE_NAMES = { LUD:'Lüdenscheid', BAR:'Barleben' };

const Svg = ({ d, size=16 }) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
        strokeLinecap="round" strokeLinejoin="round"
        style={{width:size, height:size, flexShrink:0}}
        dangerouslySetInnerHTML={{__html:d}}/>
);

const SrcChip = ({ src }) => {
    const cls = ['snmp','dns','mdns','unifi','ad'].includes(src) ? `ns-source ns-source-${src}` : 'ns-source';
    return <span className={cls}>{src}</span>;
};

export default function ScannerPage() {
    const [sites, setSites]     = useState([]);
    const [assets, setAssets]   = useState([]);
    const [alerts, setAlerts]   = useState([]);
    const [stats, setStats]     = useState(null);
    const [loading, setLoading] = useState(true);
    const [typeF, setTypeF]     = useState('all');
    const [statusF, setStatusF] = useState('all');
    const [srcF, setSrcF]       = useState('all');
    const [q, setQ]             = useState('');

    const load = useCallback(async () => {
        try {
            const [s,st,al,a] = await Promise.all([
                scannerService.getSites(),
                scannerService.getStats(),
                scannerService.getAlerts({limit:50}),
                scannerService.getAssets({}),
            ]);
            setSites(s||[]); setStats(st); setAlerts(al||[]); setAssets(a||[]);
        } catch { toast.error('Fehler beim Laden'); }
        finally { setLoading(false); }
    }, []);

    useEffect(() => { load(); }, [load]);

    const aug = useMemo(() => assets.map(a => ({
        ...a,
        type: inferType(a.vendor, a.hostname),
        sources: [
            'arp',
            ...(a.hostname ? ['dns'] : []),
            ...(['kyocera','ubiquiti','unifi','cisco','lancom'].some(v=>(a.vendor||'').toLowerCase().includes(v)) ? ['snmp'] : []),
        ],
    })), [assets]);

    const typeCounts = useMemo(() => {
        const c = { all: aug.length };
        aug.forEach(a => { c[a.type] = (c[a.type]||0)+1; });
        return c;
    }, [aug]);

    const filtered = useMemo(() => aug.filter(a => {
        if (typeF !== 'all' && a.type !== typeF) return false;
        if (statusF !== 'all' && a.status !== statusF) return false;
        if (srcF !== 'all' && !a.sources.includes(srcF)) return false;
        if (q) {
            const b = `${a.ip} ${a.mac||''} ${a.hostname||''} ${a.vendor||''}`.toLowerCase();
            if (!b.includes(q.toLowerCase())) return false;
        }
        return true;
    }), [aug, typeF, statusF, srcF, q]);

    const offlineAlerts = useMemo(() => alerts.filter(a => a.status==='offline'), [alerts]);
    const site0 = sites[0];
    const siteName = site0 ? (SITE_NAMES[site0.site_id] || site0.site_id) : '–';
    const syncMins = site0 ? Math.floor((Date.now() - new Date(site0.last_seen).getTime()) / 60000) : null;

    if (loading) return (
        <div style={{display:'flex',alignItems:'center',justifyContent:'center',height:400,color:'var(--text-3)'}}>
            Lädt…
        </div>
    );

    const exportCsv = () => {
        const rows = aug.map(a=>`${a.ip};${a.mac||''};${a.hostname||''};${a.vendor||''};${a.site_id};${a.status}`);
        const csv = ['IP;MAC;Hostname;Hersteller;Standort;Status',...rows].join('\n');
        const url = URL.createObjectURL(new Blob(['﻿'+csv],{type:'text/csv;charset=utf-8'}));
        const el = document.createElement('a'); el.href=url; el.download='scanner-assets.csv'; el.click();
    };

    return (
        <div className="ns-page">

            {/* ── HERO ── */}
            <div className="ns-hero">
                <div>
                    <div className="ns-eyebrow">
                        <span className="ns-live-dot"/>
                        Live · Standort {siteName}
                    </div>
                    <h1 className="ns-h1">Nexus Scanner</h1>
                    <p className="ns-lead">
                        Automatisches Netzwerk-Inventar über ARP, DNS, SNMP und Active Directory.
                        Zuletzt synchronisiert <strong>{site0 ? timeAgo(site0.last_seen) : '–'}</strong>
                        {' '}· {MODULES.filter(m=>m.on).length} Module aktiv
                        {site0?.scanner_version ? <> · Scanner-Version <strong>v{site0.scanner_version}</strong></> : null}.
                    </p>
                </div>
                <div className="ns-hero-actions">
                    <button className="ns-btn" onClick={exportCsv}>
                        <Svg d='<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>'/>
                        Export
                    </button>
                    <button className="ns-btn ns-btn-primary" onClick={load}>
                        <Svg d='<path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/>'/>
                        Jetzt scannen
                    </button>
                </div>
            </div>

            {/* ── STATS ── */}
            <div className="ns-stats">

                {/* Feature card */}
                <div className="ns-stat ns-stat-feature">
                    <div className="ns-sparkline" aria-hidden="true">
                        {SPARKLINE.map((h,i) => <span key={i} style={{height:`${h}%`}}/>)}
                    </div>
                    <div className="ns-stat-label">
                        <span>Geräte erfasst</span>
                        {site0 && <span className="ns-stat-tag">{site0.site_id}</span>}
                    </div>
                    <div className="ns-stat-value">{stats?.total ?? '–'}</div>
                    <div className="ns-delta-pill">↑ {stats?.online ?? 0} online heute</div>
                    <div className="ns-stat-meta">
                        <span className="ns-chip"><span className="ns-dot ns-dot-green"/>{stats?.online ?? 0} online</span>
                        <span className="ns-chip"><span className="ns-dot ns-dot-red"/>{stats?.offline ?? 0} offline</span>
                    </div>
                </div>

                {/* Module */}
                <div className="ns-stat">
                    <div className="ns-stat-label"><span>Module</span></div>
                    <div className="ns-stat-value">
                        {MODULES.filter(m=>m.on).length}
                        <span className="ns-stat-unit">/ {MODULES.length}</span>
                    </div>
                    <div className="ns-stat-meta">
                        <span className="ns-chip"><span className="ns-dot ns-dot-green"/>{MODULES.filter(m=>m.on&&m.status==='ok').length} OK</span>
                        <span className="ns-chip"><span className="ns-dot ns-dot-yellow"/>{MODULES.filter(m=>m.on&&m.status==='warn').length} Warn</span>
                    </div>
                </div>

                {/* Letzter Scan */}
                <div className="ns-stat">
                    <div className="ns-stat-label"><span>Letzter Scan</span></div>
                    <div className="ns-stat-value">
                        {syncMins ?? '–'}
                        {syncMins !== null && <span className="ns-stat-unit">Min</span>}
                    </div>
                    <div className="ns-stat-desc">
                        {stats?.total ?? 0} Hosts erfasst · {siteName}
                    </div>
                </div>

                {/* Alerts */}
                <div className="ns-stat">
                    <div className="ns-stat-label"><span>Alerts (24 h)</span></div>
                    <div className={`ns-stat-value${(stats?.alerts24h||0)>0?' ns-stat-value-danger':''}`}>
                        {stats?.alerts24h ?? 0}
                    </div>
                    <div className="ns-stat-meta">
                        {(stats?.alerts24h||0)>0 ? <>
                            <span className="ns-chip"><span className="ns-dot ns-dot-red"/>{offlineAlerts.length} kritisch</span>
                        </> : <span style={{fontSize:12.5,color:'var(--ns-text-3,#94a3b8)'}}>Alles OK</span>}
                    </div>
                </div>
            </div>

            {/* ── ATTENTION ── */}
            {offlineAlerts.length > 0 && (<>
                <div className="ns-section-title">
                    <h2>Aufmerksamkeit erforderlich</h2>
                    <span className="ns-meta">{offlineAlerts.length} Themen · automatisch erkannt</span>
                </div>
                <div className={`ns-attn-grid ns-attn-${Math.min(offlineAlerts.length,3)}`}>
                    {offlineAlerts.slice(0,3).map((a,i) => (
                        <div key={i} className="ns-attn ns-attn-danger">
                            <div className="ns-attn-head">
                                <div className="ns-attn-icn ns-attn-icn-danger">
                                    <Svg size={18} d='<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>'/>
                                </div>
                                <div className="ns-attn-info">
                                    <div className="ns-attn-title">{a.check_name} — offline</div>
                                    <div className="ns-attn-sub"><span style={{fontFamily:'ui-monospace,monospace',fontSize:11.5}}>{a.target}</span></div>
                                </div>
                                <span className="ns-attn-sev ns-attn-sev-danger">Offline</span>
                            </div>
                            <div className="ns-attn-body">
                                Zuletzt gesehen: <strong style={{color:'var(--ns-text)'}}>{timeAgo(a.triggered_at)}</strong>
                                {a.error_msg ? ` · ${a.error_msg}` : ''}
                            </div>
                            <div className="ns-attn-actions">
                                <button className="ns-btn ns-btn-sm">Details</button>
                            </div>
                        </div>
                    ))}
                </div>
            </>)}

            {/* ── SECTION TITLE ── */}
            <div className="ns-section-title">
                <h2>Assets</h2>
                <span className="ns-meta">automatisch erkannt · sortiert nach letztem Kontakt</span>
            </div>

            {/* ── MAIN GRID ── */}
            <div className="ns-main-grid">

                {/* LEFT: assets table */}
                <div>
                    {/* Segmented type filter */}
                    <div className="ns-seg">
                        {[['all','Alle',null], ...Object.entries(TYPE_CONFIG).filter(([k])=>typeCounts[k]).map(([k,v])=>[k,v.label,v.icon])].map(([key,label,icon]) => {
                            if (!typeCounts[key] && key!=='all') return null;
                            const active = typeF === key;
                            return (
                                <button key={key} onClick={()=>setTypeF(key)}
                                    className={`ns-seg-btn${active?' ns-seg-btn-active':''}`}>
                                    {icon && <Svg size={14} d={icon}/>}
                                    {label}
                                    <span className={`ns-seg-num${active?' ns-seg-num-active':''}`}>
                                        {typeCounts[key]||0}
                                    </span>
                                </button>
                            );
                        })}
                    </div>

                    {/* Toolbar */}
                    <div className="ns-toolbar">
                        <div className="ns-search">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
                            </svg>
                            <input value={q} onChange={e=>setQ(e.target.value)}
                                placeholder="Nach IP, MAC, Hostname oder Hersteller suchen…"/>
                        </div>

                        <div className="ns-select-wrap">
                            <select className="ns-select" value={statusF} onChange={e=>setStatusF(e.target.value)}>
                                <option value="all">Alle Status</option>
                                <option value="online">Online</option>
                                <option value="offline">Offline</option>
                            </select>
                            <svg className="ns-select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                <polyline points="6 9 12 15 18 9"/>
                            </svg>
                        </div>

                        <div className="ns-select-wrap">
                            <select className="ns-select" value={srcF} onChange={e=>setSrcF(e.target.value)}>
                                <option value="all">Alle Quellen</option>
                                <option value="arp">ARP</option>
                                <option value="dns">DNS</option>
                                <option value="snmp">SNMP</option>
                            </select>
                            <svg className="ns-select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                <polyline points="6 9 12 15 18 9"/>
                            </svg>
                        </div>

                        <span className="ns-toolbar-count">{filtered.length} von {aug.length}</span>
                    </div>

                    {/* Table */}
                    <div className="ns-card">
                        <table className="ns-table">
                            <thead>
                                <tr>
                                    <th style={{minWidth:270}}>Gerät</th>
                                    <th>Telemetrie</th>
                                    <th>Quellen</th>
                                    <th>Zuletzt</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filtered.length === 0 ? (
                                    <tr><td colSpan={5} className="ns-empty">
                                        {aug.length===0?'Noch kein Scanner verbunden.':'Keine Geräte passen zum Filter.'}
                                    </td></tr>
                                ) : filtered.map(a => {
                                    const tc = TYPE_CONFIG[a.type] || TYPE_CONFIG.iot;
                                    const iconClass = `ns-device-icon${tc.tone ? ' ns-device-icon-'+tc.tone : ''}`;
                                    const isOnline = a.status === 'online';
                                    return (
                                        <tr key={`${a.site_id}-${a.ip}`}>
                                            <td>
                                                <div className="ns-device-cell">
                                                    <div className={iconClass}>
                                                        <Svg size={17} d={tc.icon}/>
                                                    </div>
                                                    <div className="ns-device-info">
                                                        <div className="ns-device-name">{a.hostname || a.ip}</div>
                                                        <div className="ns-device-sub">
                                                            {a.ip}{a.mac?` · ${a.mac}`:''}{a.vendor?` · ${a.vendor}`:''}
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                {a.hostname ? (
                                                    <div className="ns-telemetry">
                                                        <div className="ns-telemetry-head">Hostname · Hersteller</div>
                                                        <div className="ns-telemetry-val">
                                                            <strong>{a.hostname}</strong>
                                                        </div>
                                                        {a.vendor && <div className="ns-telemetry-val">{a.vendor}</div>}
                                                    </div>
                                                ) : (
                                                    <span className="ns-telemetry-empty">—</span>
                                                )}
                                            </td>
                                            <td>
                                                <div className="ns-sources">
                                                    {a.sources.map(s => <SrcChip key={s} src={s}/>)}
                                                </div>
                                            </td>
                                            <td style={{fontSize:12,color:'var(--ns-text-3,#94a3b8)',whiteSpace:'nowrap'}}>
                                                {timeAgo(a.last_seen)}
                                            </td>
                                            <td>
                                                <span className={`ns-badge ${isOnline?'ns-badge-online':'ns-badge-offline'}`}>
                                                    <span className="ns-badge-dot"/>
                                                    {isOnline ? 'Online' : 'Offline'}
                                                </span>
                                            </td>
                                        </tr>
                                    );
                                })}
                            </tbody>
                        </table>
                        <div className="ns-table-footer">
                            <span>Zeige {filtered.length} von {aug.length} Geräten</span>
                        </div>
                    </div>
                </div>

                {/* RIGHT: side panel */}
                <aside className="ns-side">

                    {/* Scan card */}
                    <div className="ns-scan-card">
                        <div className="ns-scan-card-head">Letzter Sync</div>
                        <div className="ns-scan-card-title">
                            {site0 ? timeAgo(site0.last_seen) : 'Kein Scanner'}
                        </div>
                        <div className="ns-scan-progress">
                            <span style={{width: syncMins !== null ? `${Math.max(5, 100 - syncMins*20)}%` : '5%'}}/>
                        </div>
                        <div className="ns-scan-card-body">
                            <strong>5-Minuten-Intervall</strong> · ARP 192.168.0.0/24 · SNMP aktiv
                        </div>
                    </div>

                    {/* Modules */}
                    <div className="ns-panel">
                        <div className="ns-panel-head">
                            <h3>Module</h3>
                            <span className="ns-meta">{MODULES.filter(m=>m.on).length} / {MODULES.length} aktiv</span>
                        </div>
                        <div className="ns-panel-body">
                            <div className="ns-mod-list">
                                {MODULES.map((m,i) => (
                                    <div key={i} className="ns-mod-row">
                                        <div className={`ns-mod-ico${m.on?' ns-mod-ico-on':''}`}>
                                            <Svg size={14} d={m.icon}/>
                                        </div>
                                        <div className="ns-mod-meta">
                                            <div className="ns-mod-name">{m.name}</div>
                                            <div className="ns-mod-detail">{m.detail}</div>
                                        </div>
                                        <span className={`ns-mod-status${m.status==='warn'?' ns-mod-status-warn':m.status==='off'?' ns-mod-status-off':''}`}/>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Alerts */}
                    <div className="ns-panel">
                        <div className="ns-panel-head">
                            <h3>Offene Alerts</h3>
                            <a>Alle →</a>
                        </div>
                        <div className="ns-panel-body">
                            {alerts.length === 0 ? (
                                <div className="ns-telemetry-empty" style={{textAlign:'center',padding:'16px 0'}}>
                                    Keine offenen Alerts
                                </div>
                            ) : (
                                <div className="ns-alert-list">
                                    {alerts.slice(0,4).map((a,i) => (
                                        <div key={i} className={`ns-alert-row${a.status==='offline'?' ns-alert-row-err':' ns-alert-row-warn'}`}>
                                            <div className={`ns-alert-ico${a.status==='offline'?' ns-alert-ico-err':' ns-alert-ico-warn'}`}>
                                                <Svg size={14} d={a.status==='offline'
                                                    ? '<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/>'
                                                    : '<path d="M20 6 9 17l-5-5"/>'}/>
                                            </div>
                                            <div className="ns-alert-body">
                                                <div className="ns-alert-title">{a.check_name}</div>
                                                <div className="ns-alert-desc">{a.target}{a.error_msg?` · ${a.error_msg}`:''}</div>
                                                <div className="ns-alert-when">{timeAgo(a.triggered_at)}</div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                </aside>
            </div>

            {/* FAB */}
            <button className="ns-fab" onClick={load} title="Jetzt aktualisieren">
                <Svg size={22} d='<polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/>'/>
            </button>
        </div>
    );
}
