"use client";
import { useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import Image from "next/image";
import { Zap } from "lucide-react";
import {
  PageHeader,
  Panel,
  StatusBadge,
  Metric,
  PreviewNotice,
} from "@/components/shared/page";
import { Tabs } from "@/components/shared/tabs";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/shared/field";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { usePreviewRole } from "@/components/layout/preview-context";
import { canManage, isManager } from "@/lib/preview";
import { SessionTable } from "@/features/dashboard/session-table";
import { sessions } from "@/features/dashboard/fixtures";
import { useChargepoints } from "./provider";
import { ChargepointEditor } from "./editor";
import { DeviceTabs } from "./device-tabs";
const tabs = [
  "Overview",
  "Authorizations",
  "Connectors",
  "Sessions",
  "Logs",
  "Events",
  "Configuration",
  "Firmware",
  "Diagnostic Logs",
].map((label) => ({ label, value: label.toLowerCase().replaceAll(" ", "-") }));
export function ChargepointDetail({ id }: { id: string }) {
  const { points, setPoints } = useChargepoints(),
    role = usePreviewRole(),
    params = useSearchParams();
  const point = points.find((p) => p.id === id);
  const [edit, setEdit] = useState(false),
    [imageOpen, setImageOpen] = useState(false),
    [imageUrl, setImageUrl] = useState(""),
    [imageError, setImageError] = useState(""),
    [notice, setNotice] = useState("");
  useEffect(
    () => () => {
      if (imageUrl) URL.revokeObjectURL(imageUrl);
    },
    [imageUrl],
  );
  if (!point)
    return (
      <Panel title="Chargestation unavailable">
        <p className="p-6">No fixture chargestation exists with this ID.</p>
      </Panel>
    );
  if (
    (isManager(role) && point.locationId !== "loc-001") ||
    (role === "investor" && !["loc-001", "loc-002"].includes(point.locationId))
  )
    return (
      <PreviewNotice>
        This chargestation is outside the assigned fixture locations.
      </PreviewNotice>
    );
  const editable = canManage(role);
  const requested = params.get("tab") ?? "overview",
    tab = tabs.some((t) => t.value === requested) ? requested : "overview";
  return (
    <>
      <PageHeader
        title={point.name}
        parent={{ label: "Chargestations", href: "/chargepoints" }}
      />
      <div className="space-y-5">
        <PreviewNotice />
        {notice && (
          <p role="status" className="text-success">
            {notice}
          </p>
        )}
        <Panel>
          <div className="flex flex-wrap items-center justify-between gap-4 p-6">
            <div className="flex gap-4">
              <div className="flex size-14 shrink-0 items-center justify-center rounded-xl bg-accent text-primary">
                {imageUrl ? (
                  <Image
                    src={imageUrl}
                    width={56}
                    height={56}
                    unoptimized
                    className="rounded-xl"
                    alt={point.name}
                  />
                ) : (
                  <Zap className="size-7" />
                )}
              </div>
              <div>
                <h2 className="text-xl font-semibold">{point.name}</h2>
                <p className="my-2 text-sm text-muted-foreground">
                  {point.description}
                </p>
                <div className="flex flex-wrap gap-2">
                  <StatusBadge>{point.status}</StatusBadge>
                  <StatusBadge>{point.online}</StatusBadge>
                  <span className="p-1 text-xs text-muted-foreground">
                    {point.protocol} · {point.endpoint}
                  </span>
                </div>
              </div>
            </div>
            {editable && (
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setImageOpen(true)}>
                  Edit Image
                </Button>
                <Button onClick={() => setEdit(true)}>Edit</Button>
              </div>
            )}
          </div>
        </Panel>
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <Metric label="Total Power" value={`${point.power} kW`} />
          <Metric label="Total Sessions" value="128" />
          <Metric label="Energy Delivered" value="2,450.80 kWh" />
          <Metric label="Revenue Today" value="IDR 684,000.00" />
        </div>
        <Tabs items={tabs} />
        {tab === "sessions" ? (
          <SessionTable
            rows={sessions.filter((s) => s.chargepoint === point.id)}
            title="Sessions"
          />
        ) : (
          <DeviceTabs
            key={point.id}
            tab={tab}
            point={point}
            editable={editable}
          />
        )}
      </div>
      <Dialog open={edit} onOpenChange={setEdit}>
        <DialogContent className="max-h-[90dvh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Edit Chargestation</DialogTitle>
            <DialogDescription>
              Update only this local preview configuration.
            </DialogDescription>
          </DialogHeader>
          <ChargepointEditor
            point={point}
            points={points}
            onCancel={() => setEdit(false)}
            onSave={(next) => {
              setPoints((all) => all.map((p) => (p.id === next.id ? next : p)));
              setEdit(false);
              setNotice("Chargestation updated locally.");
            }}
          />
        </DialogContent>
      </Dialog>
      <Dialog open={imageOpen} onOpenChange={setImageOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Image</DialogTitle>
            <DialogDescription>
              Choose a local image up to 5 MB. No upload occurs.
            </DialogDescription>
          </DialogHeader>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              const file = new FormData(e.currentTarget).get("image") as File;
              if (
                !file?.size ||
                file.size > 5 * 1024 * 1024 ||
                !["image/png", "image/jpeg", "image/webp"].includes(file.type)
              ) {
                setImageError("Choose a PNG, JPEG or WebP image up to 5 MB.");
                return;
              }
              setImageUrl(URL.createObjectURL(file));
              setImageOpen(false);
              setImageError("");
              setNotice("Local image preview selected. No file uploaded.");
            }}
          >
            <Field
              label="Chargestation Image"
              name="image"
              type="file"
              accept="image/png,image/jpeg,image/webp"
              required
            />
            {imageError && (
              <p role="alert" className="mt-3 text-destructive">
                {imageError}
              </p>
            )}
            <DialogFooter className="mt-6">
              <Button
                type="button"
                variant="outline"
                onClick={() => setImageOpen(false)}
              >
                Cancel
              </Button>
              <Button>Preview Image</Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </>
  );
}