import { AppShell } from "@/components/layout/app-shell";
import { MovementFeed } from "@/components/dashboard/movement-feed";
import { MetricCard } from "@/components/dashboard/metric-card";
import { QuickActions } from "@/components/dashboard/quick-actions";
import { LotTable } from "@/components/dashboard/lot-table";
import { getDashboardData } from "@/lib/dashboard";
import { getCurrentLocale } from "@/lib/i18n-server";
import { getDictionary } from "@/lib/i18n";

export default async function DashboardPage() {
  const locale = await getCurrentLocale();
  const dict = getDictionary(locale);
  const dashboard = await getDashboardData(locale);
  const maxVolume = Math.max(
    ...dashboard.monthlyVolume.flatMap((item) => [item.purchaseQty, item.salesQty]),
    1
  );

  return (
    <AppShell
      pathname="/dashboard"
      title="Dashboard Operasional"
      description="Status real-time lot persediaan, transaksi masuk, dan titik perhatian operasional gudang walet."
    >
      <section className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
        {dashboard.metrics.map((metric) => (
          <MetricCard key={metric.label} metric={metric} />
        ))}
      </section>
      <section className="mt-6 grid gap-6 xl:grid-cols-[1.3fr_0.7fr]">
        <article className="ops-card p-6">
          <div className="flex items-center justify-between gap-4">
            <div>
              <h2 className="ops-title">{dict.dashboard.purchaseVsSales}</h2>
              <p className="ops-copy">{dict.dashboard.purchaseVsSalesCopy}</p>
            </div>
            <button className="ops-btn-secondary">{dict.dashboard.lastSixMonths}</button>
          </div>
          <div className="mt-8 flex h-[320px] items-end gap-4 border-b border-line/70 pb-8">
            {dashboard.monthlyVolume.map((item) => (
              <div key={item.label} className="flex flex-1 items-end gap-2">
                <div className="flex flex-1 flex-col items-center justify-end gap-3">
                  <div
                    className="w-full rounded-t bg-slate-200"
                    style={{ height: `${Math.max((item.purchaseQty / maxVolume) * 100, item.purchaseQty > 0 ? 8 : 0)}%` }}
                  />
                </div>
              <div className="flex flex-1 flex-col items-center justify-end gap-3">
                  <div
                    className="w-full rounded-t bg-moss"
                    style={{ height: `${Math.max((item.salesQty / maxVolume) * 100, item.salesQty > 0 ? 8 : 0)}%` }}
                  />
                </div>
                <span className="absolute sr-only">{item.label}</span>
              </div>
            ))}
          </div>
          <div className="mt-3 flex justify-between gap-2 text-[11px] font-bold uppercase tracking-[0.05em] text-slate-400">
            {dashboard.monthlyVolume.map((item) => (
              <span key={item.label} className="flex-1 text-center">
                {item.label}
              </span>
            ))}
          </div>
          <div className="mt-5 flex gap-5 text-[13px] text-slate-500">
            <span className="inline-flex items-center gap-2">
              <span className="h-3 w-3 rounded-full bg-slate-200" />
              {dict.dashboard.purchases}
            </span>
            <span className="inline-flex items-center gap-2">
              <span className="h-3 w-3 rounded-full bg-moss" />
              {dict.dashboard.sales}
            </span>
          </div>
        </article>
        <MovementFeed
          receiptAcceptance={dashboard.averageReceiptAcceptance}
          receiptAcceptanceCopy={dashboard.averageReceiptAcceptanceCopy}
          lotAgeDistribution={dashboard.lotAgeDistribution}
          recentActivity={dashboard.recentActivity}
        />
      </section>
      <section className="mt-6 grid gap-6 xl:grid-cols-[1.25fr_0.75fr]">
        <LotTable lots={dashboard.criticalLots} />
        <div className="space-y-6">
          <article className="ops-card p-5">
            <div className="flex items-center justify-between gap-4">
              <div>
                <h2 className="ops-title">{dict.dashboard.topPartners}</h2>
                <p className="ops-copy">{dict.dashboard.topPartnersCopy}</p>
              </div>
            </div>
            <div className="mt-4 space-y-3">
              {dashboard.topPartners.map((partner) => (
                <div key={partner.name} className="flex items-center justify-between rounded border border-line/70 bg-slate-50 px-4 py-3">
                  <div>
                    <p className="font-medium text-ink">{partner.name}</p>
                    <p className="text-[13px] text-slate-500">{partner.detail}</p>
                  </div>
                  <span className="text-[13px] font-semibold text-moss">{partner.inventoryValue}</span>
                </div>
              ))}
            </div>
          </article>
          <QuickActions />
        </div>
      </section>
    </AppShell>
  );
}
