import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react";
import type { OrganizationRecord } from "./types";

function DetailItem({ label, value }: { label: string; value: string }) {
  return (
    <div className="min-w-0">
      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
      <dd className="mt-1 break-words text-sm">{value || "—"}</dd>
    </div>
  );
}

function formatDate(value: string | null) {
  if (!value) return "—";
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
}

export function OrganizationDetailsDialog({
  organization,
  loading,
  error,
  onRetry,
  onOpenChange,
}: {
  organization: OrganizationRecord | null;
  loading: boolean;
  error: string;
  onRetry(): void;
  onOpenChange(open: boolean): void;
}) {
  return (
    <Dialog open={Boolean(organization)} onOpenChange={onOpenChange}>
      {organization && (
        <DialogContent className="max-h-[90dvh] overflow-y-auto">
          <DialogHeader>
          <DialogTitle>{organization.name}</DialogTitle>
          <DialogDescription>
              Organization details returned by the tenant-scoped detail endpoint.
            </DialogDescription>
          </DialogHeader>

          {loading ? (
            <p role="status" className="py-10 text-center text-muted-foreground">Loading organization details…</p>
          ) : error ? (
            <div role="alert" className="space-y-4 rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-destructive">
              <p>{error}</p>
              <Button variant="outline" size="sm" onClick={onRetry}>
                <RefreshCw aria-hidden="true" />
                Retry
              </Button>
            </div>
          ) : (
          <div className="space-y-5">
            <section className="space-y-3">
              <h3 className="text-sm font-semibold">Organization</h3>
              <dl className="grid gap-4 sm:grid-cols-2">
                <DetailItem label="Code" value={organization.code} />
                <DetailItem label="Name" value={organization.name} />
                <DetailItem label="Status" value={organization.active === true ? "Active" : organization.active === false ? "Inactive" : ""} />
                <DetailItem label="ID" value={organization.id} />
                <DetailItem label="Phone" value={organization.phone} />
                <DetailItem label="Email" value={organization.email} />
                <DetailItem label="Avatar URL" value={organization.avatar_url} />
                <DetailItem label="Website URL" value={organization.website_url} />
              </dl>
            </section>

            <section className="space-y-3 border-t border-border pt-4">
              <h3 className="text-sm font-semibold">Address and social media</h3>
              <dl className="grid gap-4 sm:grid-cols-2">
                <DetailItem label="Street and number" value={organization.address.street_and_number ?? ""} />
                <DetailItem label="City" value={organization.address.city ?? ""} />
                <DetailItem label="State" value={organization.address.state ?? ""} />
                <DetailItem label="Postal code" value={organization.address.postal_code ?? ""} />
                <DetailItem label="Country" value={organization.address.country ?? ""} />
                <DetailItem label="WhatsApp URL" value={organization.social_media.whatsapp_url ?? ""} />
                <DetailItem label="Instagram URL" value={organization.social_media.instagram_url ?? ""} />
                <DetailItem label="LinkedIn URL" value={organization.social_media.linkedin_url ?? ""} />
                <DetailItem label="YouTube URL" value={organization.social_media.youtube_url ?? ""} />
              </dl>
            </section>

            <section className="space-y-3 border-t border-border pt-4">
              <h3 className="text-sm font-semibold">Organization settings</h3>
              <dl className="grid gap-4 sm:grid-cols-2">
                <DetailItem label="Payment status" value={organization.payment_status} />
                <DetailItem label="Reservation enabled" value={organization.enable_reservation === true ? "Yes" : organization.enable_reservation === false ? "No" : ""} />
                <DetailItem label="Onboarding complete" value={organization.has_onboarding === true ? "Yes" : organization.has_onboarding === false ? "No" : ""} />
                <DetailItem label="Maximum connectors" value={organization.max_connectors === null ? "" : String(organization.max_connectors)} />
                <DetailItem label="Currency" value={organization.currency} />
                <DetailItem label="Charger request phone" value={organization.request_charger_phone_number} />
                <DetailItem label="Charger request WhatsApp URL" value={organization.request_charger_whatsapp_url} />
                <DetailItem label="Expires at" value={formatDate(organization.expires_at)} />
                <DetailItem label="Created at" value={formatDate(organization.created_at)} />
                <DetailItem label="Updated at" value={formatDate(organization.updated_at)} />
              </dl>
            </section>

            <section className="space-y-3 border-t border-border pt-4">
              <h3 className="text-sm font-semibold">Branding</h3>
              <dl className="grid gap-4 sm:grid-cols-2">
                <DetailItem label="Brand color" value={organization.branding.color ?? ""} />
                <DetailItem label="Favicon URL" value={organization.branding.favicon ?? ""} />
                <DetailItem label="Logo URL" value={organization.branding.logo ?? ""} />
                <DetailItem label="Dark logo URL" value={organization.branding.logo_dark ?? ""} />
                <DetailItem label="Cover URL" value={organization.branding.cover ?? ""} />
              </dl>
            </section>
          </div>
          )}
        </DialogContent>
      )}
    </Dialog>
  );
}