"use client";

import { useRouter } from "next/navigation";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  ArrowLeft,
  Briefcase,
  Pencil,
  IndianRupee,
  FileText,
  CheckCircle2,
  Circle,
} from "lucide-react";
import { useGetService, useGetServiceDocuments } from "../hooks/service.hook";
import { ServiceCategory } from "../types/service.type";
import { formatDateTime } from "@/lib/format-date";

const categoryLabel: Record<ServiceCategory, string> = {
  GST: "GST",
  ITR: "ITR",
  TDS: "TDS",
  AUDIT: "Audit",
  ROC: "ROC",
  MSME: "MSME",
  PAN: "PAN",
  TAN: "TAN",
  DSC: "DSC",
  IEC: "IEC",
  TRADEMARK: "Trademark",
  OTHER: "Other",
};

const categoryColor: Record<ServiceCategory, string> = {
  GST: "text-blue-600 border-blue-600/30 bg-blue-500/10",
  ITR: "text-emerald-600 border-emerald-600/30 bg-emerald-500/10",
  TDS: "text-amber-600 border-amber-600/30 bg-amber-500/10",
  AUDIT: "text-purple-600 border-purple-600/30 bg-purple-500/10",
  ROC: "text-sky-600 border-sky-600/30 bg-sky-500/10",
  MSME: "text-orange-600 border-orange-600/30 bg-orange-500/10",
  PAN: "text-rose-600 border-rose-600/30 bg-rose-500/10",
  TAN: "text-teal-600 border-teal-600/30 bg-teal-500/10",
  DSC: "text-indigo-600 border-indigo-600/30 bg-indigo-500/10",
  IEC: "text-cyan-600 border-cyan-600/30 bg-cyan-500/10",
  TRADEMARK: "text-pink-600 border-pink-600/30 bg-pink-500/10",
  OTHER: "text-muted-foreground border-border bg-muted",
};

interface Props {
  id: string;
}

export function ViewServicePage({ id }: Props) {
  const router = useRouter();
  const { data: response, isLoading } = useGetService(id);
  const { data: docsResponse } = useGetServiceDocuments(id);
  const service = response?.data;
  const documents = docsResponse?.data ?? [];

  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 className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold tracking-tight">Service Details</h2>
          <p className="text-muted-foreground text-sm mt-0.5">
            View service information
          </p>
        </div>
      </div>

      {isLoading ? (
        <div className="flex flex-col md:flex-row gap-5 items-start">
          <div className="flex flex-col gap-4 w-full md:w-auto">
            <Card className="p-6">
              <Skeleton className="h-40 w-64" />
            </Card>
            <Skeleton className="h-16 w-64 rounded-xl" />
          </div>
          <Card className="flex-1 p-6 space-y-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <Skeleton key={i} className="h-10 w-full" />
            ))}
          </Card>
        </div>
      ) : !service ? (
        <Card className="flex flex-col items-center justify-center py-20 text-center">
          <Briefcase className="h-10 w-10 text-muted-foreground/30 mb-3" />
          <p className="text-sm font-semibold text-muted-foreground">
            Service not found
          </p>
        </Card>
      ) : (
        <div className="flex flex-col md:flex-row gap-5 items-start w-full">
          {/* LEFT CARD */}
          <div className="flex flex-col gap-4">
            <Card 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">
                <Briefcase className="h-8 w-8 text-muted-foreground" />
              </div>
              <div className="text-center">
                <p className="text-sm font-semibold">{service.name}</p>
                <p className="text-xs text-muted-foreground">
                  ₹{service.price.toLocaleString("en-IN")}
                </p>
                <div className="mt-2">
                  <Badge
                    variant="outline"
                    className={`text-[10px] ${
                      categoryColor[service.category] ?? ""
                    }`}
                  >
                    {categoryLabel[service.category]}
                  </Badge>
                </div>
              </div>
            </Card>

            <div className="border rounded-xl p-4 flex gap-3">
              <IndianRupee className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
              <p className="text-xs text-muted-foreground leading-relaxed">
                Price changes apply only to new bookings made after the update.
              </p>
            </div>
          </div>

          {/* RIGHT CARD */}
          <Card className="p-6 flex flex-col w-full">
            <div className="flex items-center justify-between mb-5">
              <p className="text-sm font-semibold flex items-center gap-2">
                <Briefcase className="h-4 w-4 text-primary" /> Service
                Information
              </p>
            </div>

            <div className=" border-none">
              {[
                { label: "Service Name", value: service.name },
                {
                  label: "Category",
                  value: (
                    <Badge
                      variant="outline"
                      className={`text-[10px] ${
                        categoryColor[service.category] ?? ""
                      }`}
                    >
                      {categoryLabel[service.category]}
                    </Badge>
                  ),
                },
                {
                  label: "Price",
                  value: (
                    <span className="font-mono font-semibold">
                      ₹{service.price.toLocaleString("en-IN")}
                    </span>
                  ),
                },
                {
                  label: "DIY Enabled",
                  value: (
                    <Badge
                      variant="outline"
                      className={`text-[10px] ${
                        service.isDiyEnabled
                          ? "text-emerald-600 border-emerald-600/30 bg-emerald-500/10"
                          : "text-muted-foreground border-border bg-muted"
                      }`}
                    >
                      {service.isDiyEnabled ? "Yes" : "No"}
                    </Badge>
                  ),
                },
                {
                  label: "Created At",
                  value: formatDateTime(service.createdAt),
                },
              ].map(({ label, value }) => (
                <div key={label} className="grid grid-cols-2 gap-4 py-3">
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center">
                    {label}
                  </p>
                  <div className="text-sm text-foreground flex items-center">
                    {value}
                  </div>
                </div>
              ))}
              {service.description && (
                <div className="grid grid-cols-2 gap-4 py-3">
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center">
                    Description
                  </p>
                  <div className="text-sm text-foreground flex items-center">
                    {service.description}
                  </div>
                </div>
              )}
            </div>

            {documents.length > 0 && (
              <div className="mt-6 pt-5 border-t border-border">
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-3 flex items-center gap-1.5">
                  <FileText className="h-3.5 w-3.5" /> Required Documents (
                  {documents.length})
                </p>
                <div className="space-y-2">
                  {documents.map((doc) => (
                    <div
                      key={doc.id}
                      className="flex items-center justify-between rounded-lg border border-border px-3 py-2"
                    >
                      <div className="flex items-center gap-2">
                        {doc.isRequired ? (
                          <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
                        ) : (
                          <Circle className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                        )}
                        <span className="text-sm">{doc.name}</span>
                      </div>
                      <Badge
                        variant="outline"
                        className={`text-[10px] ${
                          doc.isRequired
                            ? "text-emerald-600 border-emerald-600/30 bg-emerald-500/10"
                            : "text-muted-foreground border-border bg-muted"
                        }`}
                      >
                        {doc.isRequired ? "Required" : "Optional"}
                      </Badge>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </Card>
        </div>
      )}
    </div>
  );
}