"use client";
import {useEffect,useState} from "react";
import {Activity,Users,MousePointerClick,Eye} from "lucide-react";
type Summary={analytics:string[]|null;analyticsConnected:boolean};
export default function PortalAnalytics(){const [data,setData]=useState<Summary|null>(null);const [error,setError]=useState(false);useEffect(()=>{fetch('/api/portal/summary',{cache:'no-store'}).then(r=>{if(!r.ok)throw Error();return r.json()}).then(setData).catch(()=>setError(true))},[]);const values=[{label:'Active users',value:data?.analytics?.[0],icon:Users},{label:'Sessions',value:data?.analytics?.[1],icon:MousePointerClick},{label:'Page views',value:data?.analytics?.[2],icon:Eye}];return <section className="mb-7"><div className="flex items-center gap-2 mb-4"><Activity className="text-pink-600" size={20}/><h2 className="text-xl font-bold">Google Analytics 4</h2><span className="muted text-sm">Last 30 complete days</span></div><div className="grid md:grid-cols-3 gap-4">{values.map(x=><div className="panel" key={x.label}><p className="muted text-sm">{x.label}</p><div className="stat mt-2">{x.value===undefined?'—':Number(x.value).toLocaleString('en-GB')}</div></div>)}</div><p className="muted text-sm mt-3">{error?'Analytics could not be loaded.':!data?'Loading analytics…':!data.analyticsConnected?'GA4 is not connected. Ask LV Media to connect your property.':!data.analytics?'GA4 is connected, but data is unavailable. Check access and sync configuration.':'Data provided by Google Analytics 4.'}</p></section>}