import { useState, useEffect } from "react";
import { Phone, Mail, Plus, SquarePen, Trash2, Globe } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../components/ui/dialog";
import { Input } from "../../components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../components/ui/select";
import { Button } from "../../components/ui/button";
import clsx from "clsx";
import { ContactPoint, RelatedPerson } from "fhir/r4";
import { toast } from "sonner";

interface ContactsProps {
  data: ContactPoint[];
  relatedPerson: RelatedPerson;
  updateRelatedPerson: (
    updatedRelatedPerson: RelatedPerson,
  ) => Promise<RelatedPerson | undefined>;
  submitting: boolean;
  setSubmitting: (submitting: boolean) => void;
  /**
 * When true, renders contact values with no add/edit/delete affordances and never invokes
 * the telecom-write (PUT) path. Used on the related-person view: the contact shown there is
 * a server-side projection of the helper's own home Patient telecom, so writing `telecom`
 * onto the RelatedPerson resource here is a dead end - it doesn't persist to what's shown,
 * so an edit would appear to succeed and then silently revert on reload. Defaults to false
 * so other Contacts consumers keep their existing editable behavior.
 */
  readOnly?: boolean;
}

const labelStyles: Record<string, string> = {
  phone: "bg-blue-100 text-blue-600",
  email: "bg-green-100 text-green-600",
  url: "bg-purple-100 text-purple-600",
  fax: "bg-orange-100 text-orange-600",
  other: "bg-gray-100 text-gray-600",
};

const getSystemIcon = (system: string) => {
  switch (system) {
    case "phone":
      return <Phone size={18} />;
    case "email":
      return <Mail size={18} />;
    case "url":
      return <Globe size={18} />;
    default:
      return <Phone size={18} />;
  }
};

const getSystemLabel = (system: string): string => {
  const labelMap: Record<string, string> = {
    phone: "Phone",
    email: "Email",
    url: "URL",
    fax: "Fax",
    other: "Other",
  };
  return labelMap[system] || "Other";
};

const getUseLabel = (use?: string): string => {
  const useMap: Record<string, string> = {
    home: "Home",
    work: "Work",
    temp: "Temporary",
    old: "Old",
    mobile: "Mobile",
  };
  return useMap[use || ""] || use || "Other";
};

const getContactKey = (contact: ContactPoint, index: number): string => {
  return `${contact.system}-${contact.value}-${contact.use}-${index}`;
};

const Contacts = ({
  data,
  relatedPerson,
  updateRelatedPerson,
  submitting,
  setSubmitting,
  readOnly = false,
}: ContactsProps) => {
  const [open, setOpen] = useState(false);
  const [mode, setMode] = useState<"add" | "edit" | "delete">("add");
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const [contacts, setContacts] = useState<ContactPoint[]>([]);
  const [formData, setFormData] = useState({
    system: "phone" as ContactPoint["system"],
    value: "",
    use: "home" as ContactPoint["use"],
    rank: 1,
  });

  useEffect(() => {
    if (data) {
      setContacts(data);
    }
  }, [data]);

  useEffect(() => {
    if (mode === "edit" && selectedIndex !== null && contacts[selectedIndex]) {
      const contact = contacts[selectedIndex];
      setFormData({
        system: contact.system || "phone",
        value: contact.value || "",
        use: contact.use || "home",
        rank: contact.rank || 1,
      });
    } else if (
      mode === "delete" &&
      selectedIndex !== null &&
      contacts[selectedIndex]
    ) {
      // For delete mode, we don't need to populate form data
      // Just keep the selected contact info for display
    } else {
      setFormData({
        system: "phone",
        value: "",
        use: "home",
        rank: 1,
      });
    }
  }, [mode, selectedIndex, contacts]);

  const handleInputChange = (
    field: keyof typeof formData,
    value: string | number,
  ) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  const handleSaveContact = async () => {
    // Belt-and-suspenders: the UI never exposes a trigger for this in readOnly mode (no
    // add/edit/delete affordances render below), but guard the write path itself too so the
    // telecom PUT can never fire regardless of how this is invoked.
    if (readOnly) return;

    try {
      setSubmitting(true);

      if (mode !== "delete" && !formData.value.trim()) {
        toast.error("Please enter a value", { position: "top-right" });
        setSubmitting(false);
        return;
      }

      const newContact: ContactPoint = {
        system: formData.system,
        value: formData.value.trim(),
        use: formData.use,
        rank: formData.rank,
      };

      let updatedContacts: ContactPoint[];
      if (mode === "add") {
        updatedContacts = [...contacts, newContact];
      } else if (mode === "edit" && selectedIndex !== null) {
        updatedContacts = contacts.map((contact, index) =>
          index === selectedIndex ? newContact : contact,
        );
      } else if (mode === "delete" && selectedIndex !== null) {
        updatedContacts = contacts.filter(
          (_, index) => index !== selectedIndex,
        );
      } else {
        return;
      }

      const updatedRelatedPerson: RelatedPerson = {
        ...relatedPerson,
        telecom: updatedContacts.length > 0 ? updatedContacts : undefined,
      };

      await updateRelatedPerson(updatedRelatedPerson);

      setContacts(updatedContacts);

      toast.success(
        mode === "add"
          ? "Contact added successfully!"
          : mode === "edit"
          ? "Contact updated successfully!"
          : "Contact deleted successfully!",
        { position: "top-right" },
      );

      setOpen(false);
      setSelectedIndex(null);
    } catch (error: unknown) {
      console.error("Failed to update contact:", error);

      let errorMessage = "An unknown error occurred";
      if (error instanceof Error) {
        errorMessage = error.message;
      } else if (typeof error === "string") {
        errorMessage = error;
      } else if (error && typeof error === "object" && "message" in error) {
        errorMessage = String(error.message);
      }

      toast.error(`Failed to update contact: ${errorMessage}`, {
        position: "top-right",
      });
    } finally {
      setSubmitting(false);
    }
  };

  const handleOpenDialog = (
    newMode: "add" | "edit" | "delete",
    index?: number,
  ) => {
    if (readOnly) return;

    setMode(newMode);
    if (index !== undefined) {
      setSelectedIndex(index);
    } else {
      setSelectedIndex(null);
    }
    setOpen(true);
  };

  const hasData = contacts.length > 0;

  const selectedContact =
    selectedIndex !== null ? contacts[selectedIndex] : null;

  return (
    <Card className="px-1 py-2 gap-2">
      {hasData && (
        <CardHeader className="px-2 gap-0 mb-1">
          <CardTitle className="flex justify-between items-center">
            <p className="flex gap-2 items-center">Contact Details</p>
            {!readOnly && (
              <Button
                className="bg-white hover:bg-white flex gap-2 font-bold cursor-pointer"
                onClick={() => handleOpenDialog("add")}
                disabled={submitting}
              >
                <Plus /> Add
              </Button>
            )}
          </CardTitle>
        </CardHeader>
      )}
      <CardContent className="px-2 overflow-y-auto thin-scrollbar max-h-[calc(50vh-160px)] md:max-h-[calc(50vh-180px)] lg:max-h-[calc(50vh-155px)]">
        <CardDescription className="space-y-2">
          {!hasData ? (
            <div className="p-5 text-center justify-center space-y-3 items-center text-sm">
              <Phone strokeWidth={1} className="mx-auto" size={40} />
              <div className="space-y-2">
                <p className="text-lg font-bold">
                  No Contacts added yet
                </p>
                {!readOnly && (
                  <span>Add your first contact to help us keep in touch.</span>
                )}
              </div>
              {!readOnly && (
                <Button
                  className="rounded cursor-pointer"
                  onClick={() => handleOpenDialog("add")}
                  disabled={submitting}
                >
                  <Plus /> Add
                </Button>
              )}
            </div>
          ) : (
            <>
              {contacts.map((item, index) => (
                <div
                  key={getContactKey(item, index)}
                  className="flex justify-between items-center p-1 text-start"
                >
                  <div className="flex items-center gap-3">
                    {getSystemIcon(item.system || "phone")}
                    <div className="space-y-1">
                      <div className="lg:flex md:flex gap-2 items-center">
                        <p className="font-bold break-all break-normal">
                          {item.value}
                        </p>
                        {item.use && (
                          <span
                            className={clsx(
                              "text-xs px-2 py-0.5 rounded",
                              labelStyles[item.system || "other"] ||
                                "bg-gray-100 text-gray-600",
                            )}
                          >
                            {getUseLabel(item.use)}
                          </span>
                        )}
                      </div>
                      <p className="text-xs text-muted-foreground">
                        {getSystemLabel(item.system || "other")}
                      </p>
                    </div>
                  </div>
                  {!readOnly && (
                    <div className="flex gap-2 items-center">
                      <Trash2
                        size={20}
                        className="text-red-500 cursor-pointer hover:text-red-700"
                        data-testid={`contact-delete-${index}`}
                        onClick={() => {
                          if (!submitting) {
                            handleOpenDialog("delete", index);
                          }
                        }}
                      />
                      <SquarePen
                        size={18}
                        className="cursor-pointer hover:text-blue-700"
                        data-testid={`contact-edit-${index}`}
                        onClick={() => {
                          if (!submitting) {
                            handleOpenDialog("edit", index);
                          }
                        }}
                      />
                    </div>
                  )}
                </div>
              ))}
            </>
          )}
        </CardDescription>
      </CardContent>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="lg:max-w-[800px] md:max-w-[700px] lg:p-6 md:p-6 p-3">
          <DialogHeader>
            <DialogTitle>
              <div className="flex items-center gap-2">
                <Phone size={20} />
                {mode === "add"
                  ? "Add New Contact"
                  : mode === "edit"
                  ? "Edit Contact"
                  : "Delete Contact"}
              </div>
            </DialogTitle>
            <DialogDescription className="text-start">
              {mode === "delete"
                ? "Are you sure? You can't undo this action afterwards."
                : "Please fill in all the required contact information."}
            </DialogDescription>
          </DialogHeader>

          {mode === "delete" && selectedContact && (
            <div className="flex justify-between items-center p-3 rounded rounded-lg text-sm text-start bg-muted w-full">
              <div className="flex items-center gap-3">
                {getSystemIcon(selectedContact.system || "phone")}
                <div className="space-y-1">
                  <div className="lg:flex md:flex gap-2 items-center">
                    <p className="font-bold">
                      {selectedContact.value}
                    </p>
                    {selectedContact.use && (
                      <span
                        className={clsx(
                          "text-xs px-2 py-0.5 rounded",
                          labelStyles[selectedContact.system || "other"] ||
                            "bg-gray-100 text-gray-600",
                        )}
                      >
                        {getUseLabel(selectedContact.use)}
                      </span>
                    )}
                  </div>
                  <span className="text-xs py-0.5 rounded bg-muted">
                    {getSystemLabel(selectedContact.system || "")}
                  </span>
                </div>
              </div>
            </div>
          )}

          {mode !== "delete" && (
            <div className="grid md:grid-cols-6 lg:grid-cols-6 gap-4">
              <div className="flex gap-2 col-span-6 lg:col-span-2">
                <div className="lg:w-1/2 w-full">
                  <label className="text-sm font-medium">System</label>
                  <Select
                    value={formData.system}
                    onValueChange={(value: string) =>
                      handleInputChange("system", value)
                    }
                  >
                    <SelectTrigger className="w-full rounded">
                      <SelectValue placeholder="Select system" />
                    </SelectTrigger>
                    <SelectContent className="bg-white">
                      <SelectItem value="phone">Phone</SelectItem>
                      <SelectItem value="email">Email</SelectItem>
                      <SelectItem value="url">URL</SelectItem>
                      <SelectItem value="fax">Fax</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="lg:w-1/2 w-full">
                  <label className="text-sm font-medium">Use</label>
                  <Select
                    value={formData.use}
                    onValueChange={(value: string) =>
                      handleInputChange("use", value)
                    }
                  >
                    <SelectTrigger className="w-full rounded">
                      <SelectValue placeholder="Select usage" />
                    </SelectTrigger>
                    <SelectContent className="bg-white">
                      <SelectItem value="home">Home</SelectItem>
                      <SelectItem value="work">Work</SelectItem>
                      <SelectItem value="temp">Temporary</SelectItem>
                      <SelectItem value="old">Old</SelectItem>
                      <SelectItem value="mobile">Mobile</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="col-span-6 md:col-span-3 lg:col-span-3">
                <label className="text-sm font-medium">
                  {formData.system === "phone"
                    ? "Phone Number"
                    : formData.system === "email"
                    ? "Email Address"
                    : formData.system === "url"
                    ? "URL"
                    : "Value"}
                </label>
                <Input
                  value={formData.value}
                  onChange={(e) => handleInputChange("value", e.target.value)}
                  placeholder={
                    formData.system === "phone"
                      ? "Enter phone number"
                      : formData.system === "email"
                      ? "Enter email address"
                      : formData.system === "url"
                      ? "Enter URL"
                      : "Enter value"
                  }
                  type={
                    formData.system === "phone"
                      ? "tel"
                      : formData.system === "email"
                      ? "email"
                      : formData.system === "url"
                      ? "url"
                      : "text"
                  }
                  className="rounded"
                />
              </div>
            </div>
          )}

          <DialogFooter className="flex-row gap-3 justify-end">
            <Button
              variant="outline"
              className="rounded cursor-pointer bg-muted border-0"
              onClick={() => {
                setOpen(false);
                setSelectedIndex(null);
              }}
              disabled={submitting}
            >
              Cancel
            </Button>
            <Button
              className={`${
                mode === "delete" ? "bg-destructive" : "bg-primary"
              } rounded cursor-pointer`}
              onClick={handleSaveContact}
              disabled={
                submitting || (mode !== "delete" && !formData.value.trim())
              }
            >
              {submitting
                ? "Processing..."
                : mode === "add"
                ? "Add"
                : mode === "edit"
                ? "Save"
                : "Delete"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  );
};

export default Contacts;