import { useLocalizedName } from "@/shared/common/localizedName";
import { Badge } from "@/shared/common/ui/badge";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/shared/common/ui/card";
import { SelectItem } from "@/shared/common/ui/select";
import { Separator } from "@/shared/common/ui/separator";
import { useOrganizationDetail } from "@/super-admin/hooks/useOrganizations";
import { useOrganizationTypes } from "@/super-admin/hooks/useOrganizationTypes";
import { Building, Building2, Home, MapPin, ShieldCheck } from "lucide-react";

interface OrganizationCardProps {
  id: string;
}

export const OrganizationCard: React.FC<OrganizationCardProps> = ({ id }) => {
  const localized = useLocalizedName();
  const { organizationsDetailResponse, isDetailLoading, isDetailError } =
    useOrganizationDetail("Org", id);
  const {
    organizationTypesResponse,
    isLoading: isLoadingOrgTypes,
    isError: orgTypesError,
  } = useOrganizationTypes();

  if (isDetailLoading) return <div>Loading...</div>;
  if (isDetailError || !organizationsDetailResponse)
    return <div>Error loading organization.</div>;

  const org = organizationsDetailResponse.items;
  const orgType = org.organizationTypeId;

  const formatDate = (dateStr: string) =>
    new Date(dateStr).toLocaleString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    });

  return (
    <Card className="w-full max-w-3xl mx-auto shadow-xl rounded-2xl border border-gray-200 bg-white dark:bg-zinc-900 transition hover:shadow-2xl">
      <CardHeader className="flex items-center gap-3 pb-2 border-b border-gray-200 dark:border-gray-700">
        <Building2 className="w-7 h-7 text-primary" />
        <CardTitle className="text-2xl font-bold">
          {localized(org.name)}
        </CardTitle>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Status & Type Badges */}
        <div className="flex flex-wrap gap-2">
          {/* Government / Private */}
          <Badge
            variant={org.isGovernmentOrganization ? "default" : "outline"}
            className={`px-3 py-1 rounded-xl ${
              org.isGovernmentOrganization
                ? "bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-100"
                : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100"
            }`}>
            {org.isGovernmentOrganization ? "Government" : "Private"}
          </Badge>

          {/* Status: Active / Debarred */}
          <Badge
            variant="default"
            className={`px-3 py-1 rounded-xl ${
              org.status === "Active"
                ? "bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-100"
                : "bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100"
            }`}>
            {org.status}
          </Badge>
        </div>

        <Separator className="my-2" />

        {/* Key Details */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-gray-700 dark:text-gray-300">
          {/* Created At */}
          <div className="order-1">
            <p className="font-semibold">Created At:</p>
            <p>{formatDate(org.createdAt)}</p>
          </div>

          {/* Updated At */}
          <div className="order-2">
            <p className="font-semibold">Updated At:</p>
            <p>{formatDate(org.updatedAt)}</p>
          </div>

          {/* Key spans full width and comes last */}
          <div className="sm:col-span-2 order-3">
            <p className="font-semibold">Key:</p>
            <p className="break-words">{org.key}</p>
          </div>
        </div>

        <Separator className="my-2" />
        <div className="flex flex-wrap gap-2 items-center">
          {orgType &&
            organizationTypesResponse?.items
              ?.filter((type) => type.id === orgType)
              .map((type) => {
                let Icon;
                let bgColor;
                let textColor;

                switch (type.key) {
                  case "super_admin":
                    Icon = ShieldCheck;
                    bgColor = "bg-purple-100 dark:bg-purple-800";
                    textColor = "text-purple-800 dark:text-purple-100";
                    break;
                  case "woreda":
                    Icon = MapPin;
                    bgColor = "bg-primary-100 dark:bg-primary-800";
                    textColor = "text-primary-800 dark:text-primary-100";
                    break;
                  case "subcity":
                    Icon = Home;
                    bgColor = "bg-primary-100 dark:bg-primary-800";
                    textColor = "text-primary-800 dark:text-primary-100";
                    break;
                  case "office":
                    Icon = Building;
                    bgColor = "bg-yellow-100 dark:bg-yellow-800";
                    textColor = "text-yellow-800 dark:text-yellow-100";
                    break;
                  default:
                    Icon = Building;
                    bgColor = "bg-gray-100 dark:bg-gray-800";
                    textColor = "text-gray-800 dark:text-gray-100";
                }

                return (
                  <span
                    key={type.id}
                    className={`flex items-center gap-1 px-3 py-1 rounded-xl font-medium ${bgColor} ${textColor}`}>
                    <Icon className="w-4 h-4" />
                    {localized(type.name)}
                  </span>
                );
              })}
        </div>
      </CardContent>
    </Card>
  );
};
