import { QueryTabs } from "@/components/shared/query-controls";
import { Panel } from "@/components/shared/panel";
import { MetricCard } from "@/features/dashboard/metric-card";
import { OverviewTodayCards } from "@/features/sessions/overview-today-cards";
import type { OverviewToday } from "@/features/sessions/overview-contract";
import { SessionTable } from "@/features/sessions/session-table";
import type { Session } from "@/features/sessions/types";
import type { Location } from "@/features/locations/types";
import type { Pagination } from "@/lib/list-query";
import type { Chargepoint, Authorization, DeviceConfiguration, NozzleStatusSummary } from "./types";
import { DetailHeader } from "./detail-header";
import { ConnectorList } from "./connector-list";
import { AuthorizationPanel } from "./authorization-panel";
import { AuthorizationApiPanel } from "./authorizations/api-panel";
import type { AuthorizationPage } from "./authorizations/contract";
import { DeviceSettings } from "./device-settings";
import { ConfigView } from "./commands/config-view";
import { LogsView } from "./logs/logs-view";
import { EventsView } from "./events-view";
import type { OcppLog } from "./logs/mock-data";
export const chargepointTabs = [
  { id: "overview", label: "Overview" },
  { id: "authorizations", label: "Authorizations" },
  { id: "connectors", label: "Connectors" },
  { id: "sessions", label: "Sessions" },
  { id: "logs", label: "Logs" },
  { id: "events", label: "Events" },
  { id: "config", label: "Config" },
  { id: "firmware", label: "Firmware" },
  { id: "diagnostic-logs", label: "Diagnostic Logs" },
];
export const chargepointApiTabs = [
  { id: "overview", label: "Overview" },
  { id: "authorizations", label: "Authorizations" },
  { id: "connectors", label: "Connectors" },
  { id: "sessions", label: "Sessions" },
  { id: "logs", label: "Logs" },
  { id: "config", label: "Config" },
];
export function ChargepointDetail({
  chargepoint,
  locations,
  sessions,
  pagination,
  tab,
  logs,
  logsError,
  logsNotice,
  sessionsError,
  sessionsNotice,
  authorizationUsers,
  authorizations,
  authorizationsError,
  organizationCode,
  deviceConfigurations,
  source = "preview",
  connectorsComplete = true,
  nozzleSummary,
  dataWarning,
  overview,
}: {
  chargepoint: Chargepoint;
  locations: Location[];
  sessions: Session[];
  pagination: Pagination;
  tab: string;
  logs: OcppLog[];
  logsError?: string;
  logsNotice?: string;
  sessionsError?: string;
  sessionsNotice?: string;
  authorizationUsers: Authorization[];
  authorizations?: AuthorizationPage;
  authorizationsError?: string;
  organizationCode?: string;
  deviceConfigurations: DeviceConfiguration[];
  source?: "api" | "preview";
  connectorsComplete?: boolean;
  nozzleSummary?: NozzleStatusSummary;
  dataWarning?: string;
  overview?: OverviewToday;
}) {
  const tabs = source === "api" ? chargepointApiTabs : chargepointTabs;
  const requestedTab = tab === "configuration" ? "config" : tab;
  const activeTab = tabs.some((item) => item.id === requestedTab) ? requestedTab : "overview";
  return (
    <div className="space-y-4">
      <DetailHeader
        data={chargepoint}
        locations={locations}
        source={source}
      />
      {dataWarning && (
        <p role="status" className="text-sm text-muted-foreground">
          {dataWarning}
        </p>
      )}
      <div className={source === "api" ? "grid gap-4 sm:grid-cols-2 lg:grid-cols-3" : "grid gap-4 sm:grid-cols-2 lg:grid-cols-4"}>
        <MetricCard
          detail
          label="Total Power"
          value={source === "api" && !connectorsComplete ? "Unavailable" : `${chargepoint.connectors.reduce((sum, c) => sum + c.power, 0)} kW`}
          description={source === "api" && !connectorsComplete ? "Connector data is incomplete" : `${chargepoint.connectors.length} connectors`}
          icon="power"
        />
        {source === "api" && <OverviewTodayCards data={overview} />}
        {source === "preview" && (
          <>
            <MetricCard
              detail
              label="Sessions Today"
              value="0"
              description="Total sessions since 00:00"
              icon="sessions"
            />
            <MetricCard
              detail
              label="Energy Delivered"
              value="0.00 kWh"
              description="Total energy since 00:00"
              icon="energy"
            />
            <MetricCard
              detail
              label="Revenue Today"
              value="1636614"
              description="Total revenue since 00:00"
              icon="revenue"
            />
          </>
        )}
      </div>
      {source === "api" && activeTab === "overview" && (
        <p role="status" className="text-sm text-muted-foreground">
          Revenue Today is unavailable from the confirmed Overview endpoints.
        </p>
      )}
      <div className="pt-2">
        <QueryTabs items={tabs} active={activeTab} clearListFilters clearKeys={["auth_query"]} />
      </div>
      {activeTab === "overview" ? (
        <div className="grid items-start gap-6 xl:grid-cols-3">
          <Panel
            title="Device Information"
            className="detail-panel xl:col-span-2"
          >
            <dl className="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2">
              {[
                ["Meter Type", chargepoint.meterType ?? "—"],
                ["Model", chargepoint.model],
                ["Vendor", chargepoint.vendor],
                ["Firmware Version", chargepoint.firmware],
                ["Box Serial Number", chargepoint.boxSerialNumber ?? "—"],
                ["Chargepoint Serial Number", chargepoint.serialNumber ?? "—"],
                ["ICCID", chargepoint.iccid ?? "—"],
                ["IMSI", chargepoint.imsi ?? "—"],
                ["Meter Serial Number", chargepoint.meterSerialNumber ?? "—"],
              ].map(([label, value]) => (
                <div key={label}>
                  <dt className="metric-label">{label}</dt>
                  <dd className="mt-1 font-medium">{value}</dd>
                </div>
              ))}
            </dl>
          </Panel>
          <div className="space-y-6">
            <Panel className="detail-panel" title="Network & Metering">
              <dl>
                <dt className="metric-label">Connection URL</dt>
                <dd className="mt-1 break-all font-medium">
                  {chargepoint.connectionUrl ?? "—"}
                </dd>
              </dl>
            </Panel>
            <Panel className="detail-panel" title="Connector Status">
              {(Object.keys(nozzleSummary ?? {}).length
                ? Object.entries(nozzleSummary ?? {})
                    .filter(([, count]) => count !== undefined && count > 0)
                : Array.from(new Set(chargepoint.connectors.map((c) => c.status)))
                    .map((status) => [status, chargepoint.connectors.filter((c) => c.status === status).length] as const)
              ).map(([status, count]) => (
                <div
                  key={status}
                  className="mb-2 flex justify-between rounded-lg bg-muted px-3 py-2"
                >
                  <span>{status}</span>
                  <span>{count}</span>
                </div>
              ))}
              {!Object.keys(nozzleSummary ?? {}).length && !chargepoint.connectors.length && (
                <p className="text-muted-foreground">No connector status data</p>
              )}
            </Panel>
            {source === "preview" && (
              <Panel className="detail-panel" title="Metadata">
                <p className="text-muted-foreground">No metadata</p>
              </Panel>
            )}
          </div>
        </div>
      ) : activeTab === "authorizations" ? (
        source === "api" ? <AuthorizationApiPanel chargepoint={chargepoint} data={authorizations} loadError={authorizationsError} /> : <AuthorizationPanel users={authorizationUsers} />
      ) : activeTab === "connectors" ? (
        <>
          {!connectorsComplete && (
            <p role="alert" className="text-sm text-destructive">
              Connector data is incomplete or unavailable.
            </p>
          )}
          <ConnectorList
            data={chargepoint.connectors}
            source={source}
            chargepointId={chargepoint.id}
            chargepointName={chargepoint.name}
            organizationCode={organizationCode}
          />
        </>
      ) : activeTab === "sessions" ? (
        <SessionTable
          data={sessions} pagination={pagination} source={source} paginationEnabled={source === "preview"}
          loadError={sessionsError} loadNotice={sessionsNotice}
          scopeChargepointId={chargepoint.id} scopeLocationId={chargepoint.locationId}
        />
      ) : activeTab === "logs" ? (
        <LogsView
          data={logs}
          source={source}
          loadError={logsError}
          loadNotice={logsNotice}
        />
      ) : activeTab === "events" ? (
        <EventsView data={logs} />
      ) : activeTab === "config" ? (
        <ConfigView chargepoint={chargepoint} source={source} />
      ) : (
        <DeviceSettings
          key={activeTab}
          configurations={deviceConfigurations}
          tab={activeTab as "configuration" | "firmware" | "diagnostic-logs"}
        />
      )}
    </div>
  );
}