"use client";

import { useRouter } from "next/navigation";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { ArrowLeft, Building2, Info } from "lucide-react";
import { useGetDepartment } from "../hooks/department.hook";
import { formatDateTime } from "@/lib/format-date";

interface Props {
  id: string;
}

export function ViewDepartmentPage({ id }: Props) {
  const router = useRouter();
  const { data: deptRaw, isLoading } = useGetDepartment(id);
  const dept =
    deptRaw && typeof deptRaw === "object" && "data" in (deptRaw as any)
      ? (deptRaw as any).data
      : deptRaw;

  const initials = dept?.name?.trim().slice(0, 2).toUpperCase() ?? "";

  return (
    <div className="space-y-4">
      <button
        onClick={() => router.back()}
        className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm"
      >
        <ArrowLeft className="h-4 w-4" /> Back
      </button>
      <div>
        <h2 className="text-2xl font-bold tracking-tight">
          Department Details
        </h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          View department information
        </p>
      </div>

      <div className="flex flex-col md:flex-row gap-5 items-start w-full">
        {/* LEFT */}
        <div className="flex flex-col gap-4">
          <Card>
            <CardContent className="p-6 flex flex-col items-center gap-3">
              <div className="w-20 h-20 rounded-xl bg-muted flex items-center justify-center">
                {initials ? (
                  <span className="text-2xl font-bold text-primary">
                    {initials}
                  </span>
                ) : (
                  <Building2 className="h-8 w-8 text-muted-foreground" />
                )}
              </div>
              <div className="text-center">
                <p className="text-sm font-semibold">{dept?.name ?? "—"}</p>
                <Badge
                  variant="outline"
                  className="text-emerald-600 border-emerald-600/30 bg-emerald-500/10 text-[10px] mt-1"
                >
                  Active
                </Badge>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-4 flex gap-3">
              <Info className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
              <p className="text-xs text-muted-foreground leading-relaxed">
                Departments help organize employees and assign tasks within your
                firm.
              </p>
            </CardContent>
          </Card>
        </div>

        {/* RIGHT */}
        <Card className="w-full max-w-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Building2 className="h-4 w-4 text-primary" />
              Department Info
            </CardTitle>
          </CardHeader>

          <CardContent>
            {isLoading ? (
              <div className="space-y-3">
                {[1, 2, 3, 4].map((i) => (
                  <Skeleton key={i} className="h-10 w-full" />
                ))}
              </div>
            ) : dept ? (
              <div className=" rounded-lg">
                {[
                  {
                    label: "Department Name",
                    value: <span className="font-semibold">{dept.name}</span>,
                  },

                  {
                    label: "Created",
                    value: formatDateTime(dept.createdAt),
                  },
                ].map(({ label, value }) => (
                  <div
                    key={label}
                    className="flex items-center justify-between px-4 py-3"
                  >
                    <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                      {label}
                    </span>
                    <span className="text-sm text-foreground">{value}</span>
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <Building2 className="h-10 w-10 text-muted-foreground/30 mb-3" />
                <p className="text-sm font-semibold text-muted-foreground">
                  Department not found
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}