/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import {
  Wallet,
  TrendingUp,
  Store,
  MapPin,
  Phone,
  AlertTriangle,
  Activity,
  Clock,
  ArrowUpRight,
} from 'lucide-react';
import { useOrderSummary, useTenantInfo, useInvoiceInsight } from '../services/queries';
import { DEFAULT_CONFIG_ID } from '../services/api';
import { useFiestaLocationSummary, useFiestaTenantLocations } from '../services/fiestaQueries';
import { FIESTA_TENANT_ID } from '../services/fiestaApi';

interface DashboardViewProps {
  searchQuery: string;
  isCoimbatoreView: boolean;
  /** Fiesta merchant tenant to scope live store summaries to. */
  tenantId?: number;
}

const ymd = (d: Date) =>
  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;

const str = (v: unknown): string => (v == null ? '' : String(v));

export default function DashboardView({ searchQuery, tenantId = FIESTA_TENANT_ID }: DashboardViewProps) {
  // Live data — month-to-date order summary + tenant identity + store locations.
  const today = new Date();
  const monthStart = new Date(today);
  monthStart.setDate(today.getDate() - 30); // Last 30 days to include May orders
  const fromdate = ymd(monthStart);
  const todate = ymd(today);

  // All scoped to the signed-in merchant's tenant. Store locations come from the
  // Fiesta source (the single source of truth used across the app) — it's already
  // deduped and stripped of test rows, unlike the raw Hasura tenant-locations feed.
  const summaryQ = useOrderSummary(tenantId, fromdate, todate, DEFAULT_CONFIG_ID);
  const tenantQ = useTenantInfo(tenantId);
  const locationsQ = useFiestaTenantLocations(tenantId);
  const insightQ = useInvoiceInsight(tenantId);

  const s = summaryQ.data;
  const tenantName = str(tenantQ.data?.tenantname) || s?.tenantname || `Tenant ${tenantId}`;

  // Revenue + profit come from the live invoice/financial insight. The endpoint
  // returns two distinct figures (revenue and profit); we surface both rather than
  // repeating one. When the tenant has no invoice records we show "—" instead of a
  // misleading ₹0.
  const insight = insightQ.data as any;
  const money = (v: number | null) => (v == null ? '—' : `₹${Math.round(v).toLocaleString('en-IN')}`);
  const monthlyRevenue = insight ? Number(insight.grossrevenue || insight.overallrevenue || insight.revenue || 0) : null;
  const monthlyProfit = insight ? Number(insight.profit || insight.netrevenue || insight.margin || 0) : null;

  const locSummaryQ = useFiestaLocationSummary(tenantId);
  const summaries = locSummaryQ.data ?? [];

  // Region fulfillment — live month-to-date delivered ÷ total orders for the tenant.
  const ordersTotal = s?.total ?? 0;
  const ordersDelivered = s?.delivered ?? 0;
  const regionFulfillmentPct = ordersTotal > 0 ? (ordersDelivered / ordersTotal) * 100 : null;

  const locations = (locationsQ.data ?? []).filter((loc) => {
    if (!searchQuery) return true;
    const q = searchQuery.toLowerCase();
    return (
      str(loc.locationname).toLowerCase().includes(q) ||
      str(loc.city).toLowerCase().includes(q) ||
      str(loc.suburb).toLowerCase().includes(q)
    );
  });

  // KPI cards — orders from getordersummary, profit from getinvoiceinsight.
  const totalStoresCount = locations.length;
  const activeStoresCount = locations.filter(l => str(l.status).toLowerCase() === 'active').length;
  const inactiveStoresCount = totalStoresCount - activeStoresCount;
  const activePct = totalStoresCount > 0 ? Math.round((activeStoresCount / totalStoresCount) * 100) : 0;
  const circumference = 251.2;
  const dashOffset = circumference - (circumference * activePct) / 100;

  const kpis = [
    {
      title: 'ACTIVE OUTLETS',
      display: `${activeStoresCount} / ${totalStoresCount}`,
      sub: `${activePct}% of the network is live`,
      icon: Store,
      bar: 'from-purple-500 to-indigo-500',
      chip: 'bg-purple-50 text-purple-650 ring-purple-100',
      loading: locationsQ.isLoading,
    },
    {
      title: 'REGION FULFILLMENT',
      display: regionFulfillmentPct == null ? '—' : `${regionFulfillmentPct.toFixed(1)}%`,
      sub: `${ordersDelivered.toLocaleString('en-IN')} of ${ordersTotal.toLocaleString('en-IN')} orders delivered`,
      icon: Activity,
      bar: 'from-indigo-500 to-sky-500',
      chip: 'bg-indigo-50 text-indigo-600 ring-indigo-100',
      loading: summaryQ.isLoading,
    },
    {
      title: 'MONTHLY REVENUE',
      display: money(monthlyRevenue),
      sub: 'Gross billed · month-to-date',
      icon: Wallet,
      bar: 'from-sky-500 to-cyan-500',
      chip: 'bg-sky-50 text-sky-600 ring-sky-100',
      loading: insightQ.isLoading,
    },
    {
      title: 'MONTHLY PROFIT',
      display: money(monthlyProfit),
      sub: 'Net margin · month-to-date',
      icon: TrendingUp,
      bar: 'from-emerald-500 to-teal-500',
      chip: 'bg-emerald-50 text-emerald-600 ring-emerald-100',
      loading: insightQ.isLoading,
    },
  ];

  const statusRows = [
    { label: 'Active Outlets', value: activeStoresCount, dot: 'bg-emerald-500' },
    { label: 'Inactive / Maintenance', value: inactiveStoresCount, dot: 'bg-zinc-400' },
  ];

  const loading = summaryQ.isLoading;
  const errored = summaryQ.isError;

  return (
    <div className="space-y-lg animate-in fade-in duration-500 relative">
      {/* ── Immersive Executive Banner (cover image + slate→purple gradient overlay) ── */}
      <div className="relative rounded-2xl p-6 md:p-8 text-white shadow-xl border border-purple-500/20 overflow-hidden animate-in fade-in duration-300">
        {/* Cover image background & decorative glow */}
        <div className="absolute inset-0 z-0 overflow-hidden rounded-2xl">
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=80"
            alt="Executive operations dashboard"
            className="w-full h-full object-cover object-center opacity-40"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/90 to-purple-950/80" />
          <div className="absolute top-0 right-0 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none" />
          <div className="absolute bottom-0 left-0 w-56 h-56 bg-indigo-500/10 rounded-full blur-2xl -ml-20 -mb-20 pointer-events-none" />
        </div>

        {/* Content row */}
        <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-lg">
          <div>
            <h1 className="font-sans font-bold text-2xl md:text-3xl tracking-tight text-white flex items-center gap-2.5">
              Executive Command Center
              <span className="text-[10px] text-purple-200 font-bold bg-purple-900/60 border border-purple-500/30 px-2 py-0.5 rounded-full uppercase tracking-wider animate-pulse">
                Live Core
              </span>
            </h1>
            <p className="text-slate-300 font-sans text-sm mt-2 leading-relaxed whitespace-nowrap">
              Month-to-date order operations for <strong className="text-white font-semibold">{tenantName}</strong>, pulled live from the API.
            </p>

            <div className="mt-4">
              {loading ? (
                <span className="inline-flex items-center gap-1.5 text-[11px] font-bold text-slate-300 uppercase tracking-wide">
                  <span className="w-2 h-2 rounded-full bg-slate-400 animate-pulse" /> Syncing live data…
                </span>
              ) : errored ? (
                <span className="inline-flex items-center gap-1.5 text-[11px] font-bold text-rose-300 uppercase tracking-wide" title="Restart the dev server so the /hasura proxy is active.">
                  <span className="w-2 h-2 rounded-full bg-rose-400" /> Live data unavailable
                </span>
              ) : (
                <span className="inline-flex items-center gap-1.5 text-[11px] font-bold text-emerald-300 uppercase tracking-wide">
                  <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" /> Live · {tenantName}
                </span>
              )}
            </div>
          </div>

          {/* Reporting scope panel */}
          <div className="flex flex-col items-start md:items-end gap-2 shrink-0">
            <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/15 rounded-xl px-3.5 py-2.5 shadow-sm">
              <Clock size={14} className="text-purple-300" />
              <span className="text-xs font-bold font-mono text-white tracking-tight">{fromdate} → {todate}</span>
            </div>
            <span className="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Month-to-date reporting scope</span>
          </div>
        </div>
      </div>

      {/* Error hint */}
      {errored && (
        <div className="bg-rose-50 border border-rose-200 rounded-xl p-md flex items-start gap-sm text-xs text-rose-800">
          <AlertTriangle size={16} className="shrink-0 mt-0.5 text-rose-500" />
          <div>
            <p className="font-semibold">Couldn't reach the live API.</p>
            <p className="mt-0.5 text-rose-700">
              The <code>/hasura</code> dev proxy loads at server start — stop and re-run <code>npm run dev</code> so the
              secret and proxy are active.
            </p>
          </div>
        </div>
      )}

      {/* KPI cards — all live from getordersummary / getinvoiceinsight */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-gutter">
        {kpis.map((kpi) => {
          const Icon = kpi.icon;
          return (
            <div
              key={kpi.title}
              className="group relative flex flex-col overflow-hidden bg-white border border-slate-200/70 rounded-2xl p-5 shadow-[0_1px_2px_rgba(16,24,40,0.04)] transition-all duration-300 hover:-translate-y-1 hover:border-purple-200 hover:shadow-[0_16px_36px_rgba(16,24,40,0.10)]"
            >
              {/* Gradient accent bar */}
              <span className={`absolute inset-x-0 top-0 h-1 bg-gradient-to-r ${kpi.bar}`} />
              <div className="flex items-start justify-between">
                <div className={`h-11 w-11 rounded-xl flex items-center justify-center ring-1 group-hover:scale-110 transition-transform duration-300 ${kpi.chip}`}>
                  <Icon size={19} />
                </div>
                <ArrowUpRight size={16} className="text-slate-300 group-hover:text-purple-400 transition-colors" />
              </div>
              <p className="text-[10px] font-bold text-slate-400 tracking-widest uppercase font-sans mt-4">
                {kpi.title}
              </p>
              <p className="font-sans font-extrabold text-[28px] leading-tight text-slate-900 tracking-tight mt-1">
                {kpi.loading ? <span className="text-slate-300">…</span> : kpi.display}
              </p>
              <p className="text-[11px] text-slate-400 font-medium mt-1.5 leading-snug">
                {kpi.sub}
              </p>
            </div>
          );
        })}
      </div>

      {/* Order status + store locations */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-gutter">
        {/* Store Node Status donut (live) */}
        <div className="bg-white border border-slate-200/70 rounded-2xl p-lg flex flex-col shadow-[0_1px_3px_rgba(16,24,40,0.05)]">
          <div className="flex items-start gap-2.5">
            <div className="h-9 w-9 rounded-xl bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100 flex items-center justify-center shrink-0">
              <Activity size={17} />
            </div>
            <div>
              <h3 className="font-sans font-bold text-base text-slate-900 tracking-tight">Store Outlet Status</h3>
              <p className="text-slate-500 text-xs font-sans mt-0.5">Active share of all registered nodes.</p>
            </div>
          </div>

          <div className="my-lg flex justify-center items-center">
            <div className="relative w-44 h-44 flex items-center justify-center">
              {/* soft glow behind the ring */}
              <div className="absolute w-32 h-32 rounded-full bg-emerald-400/10 blur-2xl" />
              <svg className="w-full h-full transform -rotate-90 relative" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="40" fill="transparent" stroke="#eef2f6" strokeWidth="9" />
                <circle
                  cx="50"
                  cy="50"
                  r="40"
                  fill="transparent"
                  stroke="url(#dashGradient)"
                  strokeWidth="9"
                  strokeDasharray={circumference}
                  strokeDashoffset={dashOffset}
                  strokeLinecap="round"
                  className="transition-all duration-700"
                />
                <defs>
                  <linearGradient id="dashGradient" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stopColor="#10b981" />
                    <stop offset="100%" stopColor="#0d9488" />
                  </linearGradient>
                </defs>
              </svg>
              <div className="absolute inset-0 flex flex-col items-center justify-center">
                <span className="font-sans font-extrabold text-4xl text-slate-900 tracking-tight">{activePct}%</span>
                <span className="text-[10px] text-emerald-600 uppercase tracking-widest font-bold mt-1">Active</span>
              </div>
            </div>
          </div>

          <div className="divide-y divide-slate-100 text-xs">
            {statusRows.map((r) => (
              <div key={r.label} className="flex justify-between items-center py-2.5">
                <span className="flex items-center gap-2 text-slate-500 font-medium">
                  <span className={`w-2.5 h-2.5 rounded-full ${r.dot}`} />
                  {r.label}
                </span>
                <span className="font-mono font-bold text-slate-700">{r.value.toLocaleString('en-IN')}</span>
              </div>
            ))}
            <div className="flex justify-between items-center pt-2.5">
              <span className="text-slate-600 font-bold">Total Nodes</span>
              <span className="font-mono font-extrabold text-purple-650">{totalStoresCount.toLocaleString('en-IN')}</span>
            </div>
          </div>
        </div>

        {/* Store locations (live) */}
        <div className="lg:col-span-2 bg-white border border-slate-200/70 rounded-2xl p-lg shadow-[0_1px_3px_rgba(16,24,40,0.05)]">
          <div className="flex justify-between items-center mb-md pb-sm border-b border-slate-100">
            <h3 className="font-sans font-bold text-base text-slate-900 flex items-center gap-2.5 tracking-tight">
              <span className="h-9 w-9 rounded-xl bg-purple-50 text-purple-650 ring-1 ring-purple-100 flex items-center justify-center">
                <Store size={17} />
              </span>
              Store Locations
            </h3>
            <span className="text-[10px] text-purple-650 uppercase font-bold bg-purple-50 px-2.5 py-1 rounded-lg tracking-wide border border-purple-100">
              {locationsQ.isLoading ? 'Loading…' : `${locations.length} Outlet${locations.length === 1 ? '' : 's'}`}
            </span>
          </div>

          {locationsQ.isLoading ? (
            <div className="text-center py-xl text-slate-400 text-xs">Loading store locations…</div>
          ) : locations.length === 0 ? (
            <div className="text-center py-xl text-slate-400 text-xs">No store locations found for this tenant.</div>
          ) : (
            <div className="space-y-sm max-h-80 overflow-y-auto pr-1">
              {locations.map((loc, i) => {
                const sum = summaries.find((s) => s.locationid === Number(loc.locationid));
                const deliveries = sum?.delivered ?? 0;
                const orders = Math.max(sum?.delivered ?? 0, sum?.total ?? 0);
                const isActive = str(loc.status).toLowerCase() === 'active';
                const name = str(loc.locationname);

                return (
                  <div
                    key={str(loc.locationid) || i}
                    className="group p-3.5 border border-slate-200/70 rounded-xl bg-slate-50/40 flex justify-between items-start gap-md hover:border-purple-200 hover:bg-white hover:shadow-[0_6px_18px_rgba(16,24,40,0.06)] transition-all animate-in fade-in"
                  >
                    <div className="flex items-start gap-3 min-w-0">
                      {/* Outlet initial badge */}
                      <div className="h-9 w-9 shrink-0 rounded-lg bg-gradient-to-br from-purple-500 to-indigo-500 text-white flex items-center justify-center font-bold text-xs uppercase shadow-sm">
                        {name.slice(0, 2) || '—'}
                      </div>
                      <div className="min-w-0">
                        <p className="font-sans font-semibold text-sm text-slate-900 truncate">{name}</p>
                        <p className="text-[11px] text-slate-500 mt-0.5 flex items-center gap-1">
                          <MapPin size={11} className="shrink-0 text-slate-400" />
                          <span className="truncate">{str(loc.address) || `${str(loc.suburb)}, ${str(loc.city)}`}</span>
                        </p>
                        {str(loc.contactno) && (
                          <p className="text-[11px] text-slate-500 mt-0.5 flex items-center gap-1">
                            <Phone size={11} className="shrink-0 text-slate-400" />
                            {str(loc.contactno)}
                          </p>
                        )}

                        {/* Node-specific Orders and Dispatches */}
                        <div className="flex items-center gap-2 mt-2.5 flex-wrap">
                          <span className="text-[10px] bg-purple-50 text-purple-650 font-bold px-2 py-0.5 rounded-md border border-purple-100/60">
                            {orders} Orders
                          </span>
                          <span className="text-[10px] bg-emerald-50 text-emerald-700 font-bold px-2 py-0.5 rounded-md border border-emerald-100/60">
                            {deliveries} Dispatched
                          </span>
                          {orders > 0 && (
                            <span className="text-[10px] text-slate-400 font-semibold">
                              {Math.round((deliveries / orders) * 100)}% Fulfilled
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                    <span
                      className={`shrink-0 inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold uppercase tracking-wide ${
                        isActive
                          ? 'text-emerald-600 bg-emerald-50 border border-emerald-100'
                          : 'text-slate-500 bg-slate-100 border border-slate-200'
                      }`}
                    >
                      <span className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-emerald-500' : 'bg-slate-400'}`} />
                      {str(loc.status) || '—'}
                    </span>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
