import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import {
  Building2,
  Clock3,
  Loader2,
  MapPin,
  Pencil,
  Phone,
  Mail,
  FileText,
  Users,
} from "lucide-react";
import { Card, PartnerShell, StatusPill } from "@/components/partner/PartnerShell";
import { EditBusinessDialog } from "@/components/partner/EditBusinessDialog";
import { businessLabel, useBusiness } from "@/lib/business-context";
import { WEEKDAYS, defaultHours } from "@/lib/partner-catalog";

export const Route = createFileRoute("/_partner/partner/account")({
  head: () => ({
    meta: [
      { title: "My Account — Airfis Partner" },
      { name: "description", content: "View and edit the business linked to your Airfis account." },
      { property: "og:title", content: "My Account — Airfis Partner" },
      {
        property: "og:description",
        content: "View and edit your active business on your Airfis account.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: AccountPage,
});

const TYPE_LABEL: Record<string, string> = {
  shop: "Shop / Service Centre",
  showroom: "Showroom",
  individual: "Individual",
};

type Hours = Record<string, { open: string; close: string; closed: boolean }>;

function formatTime(value: string) {
  const [hoursText, minutesText] = value.split(":");
  const hours = Number(hoursText);
  const minutes = Number(minutesText);
  if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return value;
  const suffix = hours >= 12 ? "pm" : "am";
  const displayHour = hours % 12 || 12;
  return `${displayHour}:${String(minutes).padStart(2, "0")} ${suffix}`;
}

function AccountPage() {
  const { active, isLoading } = useBusiness();
  const [editOpen, setEditOpen] = useState(false);

  return (
    <PartnerShell
      title="My Account"
      description="Details of your currently selected business"
      actions={
        active ? (
          <button
            type="button"
            onClick={() => setEditOpen(true)}
            className="btn-brand inline-flex items-center gap-2 text-sm"
          >
            <Pencil className="h-4 w-4" /> Edit business
          </button>
        ) : null
      }
    >
      {isLoading ? (
        <Card className="flex justify-center py-20">
          <Loader2 className="h-5 w-5 animate-spin text-ink-3" />
        </Card>
      ) : !active ? (
        <Card className="text-sm text-ink-2">
          No business selected. Choose a business to see its details.
        </Card>
      ) : (
        <div className="space-y-6">
          <Card>
            <div className="flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between">
              <div className="flex items-start gap-4">
                <div className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-[#f3f3f3] text-[#0a0a12]">
                  <Building2 className="h-6 w-6" />
                </div>
                <div className="min-w-0">
                  <h2 className="text-xl font-bold text-ink truncate">{businessLabel(active)}</h2>
                  <p className="mt-0.5 text-sm text-ink-2">
                    {TYPE_LABEL[active.business_type ?? ""] ?? active.business_type ?? "Business"}
                  </p>
                </div>
              </div>
              <StatusPill status={active.status} />
            </div>

            <div className="mt-6 grid gap-4 sm:grid-cols-2">
              <Detail
                icon={MapPin}
                label="Location"
                value={
                  [active.address, active.city, active.pincode].filter(Boolean).join(", ") || "—"
                }
              />
              <Detail icon={Phone} label="Phone" value={active.phone || "—"} />
              <Detail icon={Mail} label="Email" value={active.email || "—"} />
              <Detail icon={FileText} label="GST / Business ID" value={active.gst_number || "—"} />
              <Detail
                icon={Users}
                label="Team"
                value={`${active.userCount} user${active.userCount === 1 ? "" : "s"}`}
              />
            </div>
          </Card>

          <BusinessHours details={active.details} />
        </div>
      )}

      {active && (
        <EditBusinessDialog
          key={active.id}
          open={editOpen}
          onClose={() => setEditOpen(false)}
          business={active}
        />
      )}
    </PartnerShell>
  );
}

function BusinessHours({ details }: { details: unknown }) {
  const saved = (details ?? {}) as { is_24x7?: boolean; operating_hours?: Hours };
  const hours =
    saved.operating_hours && Object.keys(saved.operating_hours).length
      ? { ...defaultHours(), ...saved.operating_hours }
      : defaultHours();

  return (
    <Card>
      <div className="flex items-center gap-3">
        <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-surface-2 text-ink">
          <Clock3 className="h-4 w-4" />
        </span>
        <div className="min-w-0">
          <h2 className="font-bold text-ink">Business Hours</h2>
          <p className="text-sm text-ink-2">Weekly opening hours</p>
        </div>
      </div>

      {saved.is_24x7 ? (
        <div className="mt-5 rounded-lg bg-surface px-4 py-3 text-sm font-semibold text-ink">
          Open 24 hours, every day
        </div>
      ) : (
        <div className="mt-5 divide-y divide-hairline rounded-lg bg-surface px-4 sm:px-5">
          {WEEKDAYS.map((day) => {
            const dayHours = hours[day] ?? defaultHours()[day];
            const closed = dayHours?.closed ?? false;
            return (
              <div
                key={day}
                className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 py-3 text-sm"
              >
                <span className="min-w-0 font-medium text-ink">{day}</span>
                <span
                  className={
                    closed ? "font-medium text-ink-3" : "text-right font-semibold text-ink"
                  }
                >
                  {closed || !dayHours
                    ? "Closed"
                    : `${formatTime(dayHours.open)} – ${formatTime(dayHours.close)}`}
                </span>
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
}

function Detail({
  icon: Icon,
  label,
  value,
}: {
  icon: typeof MapPin;
  label: string;
  value: string;
}) {
  return (
    <div className="flex items-start gap-3 rounded-xl border border-hairline p-4">
      <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#f3f3f3] text-[#0a0a12]">
        <Icon className="h-4 w-4" />
      </div>
      <div className="min-w-0">
        <p className="text-xs font-semibold uppercase tracking-[0.12em] text-ink-3">{label}</p>
        <p className="mt-1 text-sm font-semibold text-ink break-words">{value}</p>
      </div>
    </div>
  );
}