import { useState, useEffect } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { useToast } from "@/hooks/use-toast";
import { apiRequest, queryClient } from "@/lib/queryClient";

type OfficeContact = {
  id?: number;
  officeName?: string | null;
  receptionistName?: string | null;
  dentistName?: string | null;
  phoneNumber?: string | null;
  email?: string | null;
  fax?: string | null;
  streetAddress?: string | null;
  city?: string | null;
  state?: string | null;
  zipCode?: string | null;
};

export function OfficeContactCard() {
  const { toast } = useToast();

  const [officeName, setOfficeName] = useState("");
  const [receptionistName, setReceptionistName] = useState("");
  const [dentistName, setDentistName] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [email, setEmail] = useState("");
  const [fax, setFax] = useState("");
  const [streetAddress, setStreetAddress] = useState("");
  const [city, setCity] = useState("");
  const [state, setState] = useState("");
  const [zipCode, setZipCode] = useState("");

  const { data: contact, isLoading } = useQuery<OfficeContact | null>({
    queryKey: ["/api/office-contact"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/office-contact");
      if (!res.ok) return null;
      return res.json();
    },
  });

  useEffect(() => {
    if (contact) {
      setOfficeName(contact.officeName ?? "");
      setReceptionistName(contact.receptionistName ?? "");
      setDentistName(contact.dentistName ?? "");
      setPhoneNumber(contact.phoneNumber ?? "");
      setEmail(contact.email ?? "");
      setFax(contact.fax ?? "");
      setStreetAddress(contact.streetAddress ?? "");
      setCity(contact.city ?? "");
      setState(contact.state ?? "");
      setZipCode(contact.zipCode ?? "");
    }
  }, [contact]);

  const saveMutation = useMutation({
    mutationFn: async (data: OfficeContact) => {
      const res = await apiRequest("PUT", "/api/office-contact", data);
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.message || "Failed to save office contact");
      }
      return res.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/office-contact"] });
      toast({ title: "Office Contact Saved", description: "Office contact information has been saved." });
    },
    onError: (err: any) => {
      toast({ title: "Error", description: err?.message || "Failed to save office contact", variant: "destructive" });
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    saveMutation.mutate({ officeName, receptionistName, dentistName, phoneNumber, email, fax, streetAddress, city, state, zipCode });
  };

  return (
    <Card>
      <CardContent className="space-y-4 py-6">
        <div>
          <h3 className="text-lg font-semibold">Office Contact</h3>
          <p className="text-sm text-gray-500 mt-1">
            Contact information for your dental office staff and communications.
          </p>
        </div>

        {isLoading ? (
          <p className="text-sm text-gray-400">Loading...</p>
        ) : (
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div>
              <label className="block text-sm font-medium">Dental Office Name</label>
              <input
                type="text"
                value={officeName}
                onChange={(e) => setOfficeName(e.target.value)}
                className="mt-1 p-2 border rounded w-full text-sm"
                placeholder="e.g. Summit Dental Care"
              />
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <label className="block text-sm font-medium">Receptionist Name</label>
                <input
                  type="text"
                  value={receptionistName}
                  onChange={(e) => setReceptionistName(e.target.value)}
                  className="mt-1 p-2 border rounded w-full text-sm"
                  placeholder="e.g. Jane Smith"
                />
              </div>

              <div>
                <label className="block text-sm font-medium">Dentist Name</label>
                <input
                  type="text"
                  value={dentistName}
                  onChange={(e) => setDentistName(e.target.value)}
                  className="mt-1 p-2 border rounded w-full text-sm"
                  placeholder="e.g. Dr. John Doe"
                />
              </div>

              <div>
                <label className="block text-sm font-medium">Office Phone Number</label>
                <input
                  type="tel"
                  value={phoneNumber}
                  onChange={(e) => setPhoneNumber(e.target.value)}
                  className="mt-1 p-2 border rounded w-full text-sm"
                  placeholder="e.g. (508) 555-0100"
                />
              </div>

              <div>
                <label className="block text-sm font-medium">Office Email Address</label>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="mt-1 p-2 border rounded w-full text-sm"
                  placeholder="e.g. office@dentalclinic.com"
                />
              </div>

              <div>
                <label className="block text-sm font-medium">Office Fax</label>
                <input
                  type="tel"
                  value={fax}
                  onChange={(e) => setFax(e.target.value)}
                  className="mt-1 p-2 border rounded w-full text-sm"
                  placeholder="e.g. (508) 555-0199"
                />
              </div>
            </div>

            <div className="pt-2">
              <h4 className="text-sm font-semibold text-gray-700 mb-3">Office Address</h4>
              <div className="space-y-3">
                <div>
                  <label className="block text-sm font-medium">Street Address</label>
                  <input
                    type="text"
                    value={streetAddress}
                    onChange={(e) => setStreetAddress(e.target.value)}
                    className="mt-1 p-2 border rounded w-full text-sm"
                    placeholder="e.g. 123 Main Street"
                  />
                </div>
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                  <div>
                    <label className="block text-sm font-medium">City</label>
                    <input
                      type="text"
                      value={city}
                      onChange={(e) => setCity(e.target.value)}
                      className="mt-1 p-2 border rounded w-full text-sm"
                      placeholder="e.g. Framingham"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium">State</label>
                    <input
                      type="text"
                      value={state}
                      onChange={(e) => setState(e.target.value)}
                      className="mt-1 p-2 border rounded w-full text-sm"
                      placeholder="e.g. MA"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium">ZIP Code</label>
                    <input
                      type="text"
                      value={zipCode}
                      onChange={(e) => setZipCode(e.target.value)}
                      className="mt-1 p-2 border rounded w-full text-sm"
                      placeholder="e.g. 01701"
                    />
                  </div>
                </div>
              </div>
            </div>

            <div className="pt-1">
              <button
                type="submit"
                className="bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700 text-sm"
                disabled={saveMutation.isPending}
              >
                {saveMutation.isPending ? "Saving..." : "Save Office Contact"}
              </button>
            </div>
          </form>
        )}
      </CardContent>
    </Card>
  );
}