"use client";

import { Bot, Database, LockKeyhole, MessageCircleMore, Radar, ShieldCheck } from "lucide-react";
import { usePreferences } from "@/components/providers/app-providers";

export function OverviewPage({ forbidden }: { forbidden: boolean }) {
  const { dictionary: t } = usePreferences();
  const cards = [
    { label: t.dashboard.overview.automation, value: t.dashboard.overview.automationValue, icon: Bot, tone: "cyan" },
    { label: t.dashboard.overview.security, value: t.dashboard.overview.securityValue, icon: LockKeyhole, tone: "green" },
    { label: t.dashboard.overview.inventory, value: t.dashboard.overview.inventoryValue, icon: Database, tone: "blue" },
    { label: t.dashboard.overview.channels, value: t.dashboard.overview.channelsValue, icon: MessageCircleMore, tone: "violet" },
  ];

  return (
    <div className="overview-page">
      {forbidden ? <div className="permission-banner"><ShieldCheck size={18} />{t.dashboard.overview.forbidden}</div> : null}
      <section className="overview-hero">
        <div>
          <p className="eyebrow">{t.dashboard.overview.eyebrow}</p>
          <h1>{t.dashboard.overview.title}</h1>
          <p>{t.dashboard.overview.description}</p>
        </div>
        <div className="hero-radar" aria-hidden="true">
          <span className="radar-ring ring-one" />
          <span className="radar-ring ring-two" />
          <span className="radar-ring ring-three" />
          <Radar size={40} />
          <i className="radar-sweep" />
        </div>
      </section>

      <section className="readiness-grid">
        {cards.map(({ label, value, icon: Icon, tone }) => (
          <article className={`readiness-card tone-${tone}`} key={label}>
            <span className="readiness-icon"><Icon size={21} /></span>
            <div><small>{label}</small><strong>{value}</strong></div>
            <span className="pulse-indicator"><i /></span>
          </article>
        ))}
      </section>

      <section className="quick-panel">
        <div className="quick-panel-icon"><ShieldCheck size={26} /></div>
        <div><h2>{t.dashboard.overview.quickTitle}</h2><p>{t.dashboard.overview.quickDescription}</p></div>
        <span className="system-live"><i />{t.dashboard.overview.live}</span>
      </section>
    </div>
  );
}