import React, { useState, useEffect } from "react";
import { Modal, Stack, Button, Loader, Text, Alert, Card, Badge, Group, Box, Select, Center, TextInput, Divider, SimpleGrid } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { searchViewPointByEmail, updateManager } from "@/lib/features/points-transfer/query";
import type { Manager } from "@/lib/features/points-transfer/types";
import { useIsMobile } from "@/hooks/useIsMobile";

interface EditManagerModalProps {
  opened: boolean;
  onClose: () => void;
  manager: Manager | null;
  onSuccess: () => void;
}

export const EditManagerModal: React.FC<EditManagerModalProps> = ({ opened, onClose, manager, onSuccess }) => {
  const isMobile = useIsMobile();
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [serviceCenter, setServiceCenter] = useState<string>("INDIA");

  // ViewPoint fields
  const [viewpointAccountId, setViewpointAccountId] = useState<string | null>(null);
  const [viewpointContactId, setViewpointContactId] = useState<string | null>(null);
  const [viewpointClub, setViewpointClub] = useState<string | null>(null);
  const [viewpointIsActive, setViewpointIsActive] = useState<boolean>(true);

  // Search state
  const [searchEmail, setSearchEmail] = useState("");
  const [loadingSearch, setLoadingSearch] = useState(false);
  const [searchResults, setSearchResults] = useState<any[] | null>(null);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (opened && manager) {
      setFirstName(manager.first_name || "");
      setLastName(manager.last_name || "");
      setEmail(manager.email || "");
      setServiceCenter(manager.service_center || "INDIA");

      setViewpointAccountId(manager.viewpoint_account_id);
      setViewpointContactId(manager.viewpoint_contact_id);
      setViewpointClub(manager.viewpoint_club);
      setViewpointIsActive(manager.viewpoint_is_active ?? true);

      setSearchEmail(manager.email || "");
      setSearchResults(null);
    }
  }, [opened, manager]);

  const handleSearch = async () => {
    if (!searchEmail) return;
    setLoadingSearch(true);
    setSearchResults(null);
    try {
      const res = await searchViewPointByEmail(searchEmail);
      if (res.success && res.data) {
        setSearchResults(res.data);
      } else {
        setSearchResults([]);
      }
    } catch (err) {
      notifications.show({ color: "red", message: "Failed to search ViewPoint" });
      setSearchResults([]);
    } finally {
      setLoadingSearch(false);
    }
  };

  const handleLinkContact = (account: any, contact: any) => {
    setViewpointAccountId(account.AccountID);
    setViewpointContactId(contact.ContactID);
    setViewpointClub(account.AccountType);
    setViewpointIsActive(contact.Active ?? true);
    setSearchResults(null);
    notifications.show({ color: "green", message: "Contact details mapped. Click Save Changes to commit." });
  };

  const handleUnlink = () => {
    setViewpointAccountId(null);
    setViewpointContactId(null);
    setViewpointClub(null);
    setViewpointIsActive(false);
    notifications.show({ color: "orange", message: "ViewPoint mapping cleared. Click Save Changes to commit." });
  };

  const handleSave = async () => {
    if (!manager) return;
    if (!firstName.trim()) {
      notifications.show({ color: "red", message: "First name is required" });
      return;
    }
    if (!email.trim()) {
      notifications.show({ color: "red", message: "Email is required" });
      return;
    }

    setSaving(true);
    try {
      const res = await updateManager(manager.id, {
        first_name: firstName,
        last_name: lastName,
        email: email,
        service_center: serviceCenter,
        viewpoint_account_id: viewpointAccountId,
        viewpoint_contact_id: viewpointContactId,
        viewpoint_club: viewpointClub,
        viewpoint_is_active: viewpointIsActive,
      });

      if (res.success) {
        notifications.show({ color: "green", message: "Manager profile updated successfully" });
        onSuccess();
        onClose();
      } else {
        notifications.show({ color: "red", message: res.message || "Failed to update manager profile" });
      }
    } catch (err) {
      notifications.show({ color: "red", message: "Error saving manager profile" });
    } finally {
      setSaving(false);
    }
  };

  return (
    <Modal
      opened={opened}
      onClose={onClose}
      title="Edit Manager Profile"
      size="lg"
      // Phone widths can't fit this form legibly in a floating modal.
      fullScreen={isMobile}
    >
      <Stack gap="md">
        <Text size="xs" c="dimmed">Update the manager's login information, service center, or ViewPoint link.</Text>

        {/* `Group grow` forced two inputs onto one row at any width — under
            400px each field ended up too narrow to read its own value. */}
        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
          <TextInput
            label="First Name"
            placeholder="First name"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
            required
          />
          <TextInput
            label="Last Name"
            placeholder="Last name"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </SimpleGrid>

        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
          <TextInput
            label="Email Address"
            placeholder="email@example.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
          <Select
            label="Service Center"
            placeholder="Select service center"
            data={["INDIA", "NON_INDIA"]}
            value={serviceCenter}
            onChange={(val) => setServiceCenter(val || "INDIA")}
            required
          />
        </SimpleGrid>

        <Divider my="xs" label="ViewPoint Account Linkage" labelPosition="center" />

        {viewpointAccountId ? (
          <Card withBorder padding="sm" bg="blue.0" style={{ borderColor: "var(--mantine-color-blue-filled)" }}>
            <Group justify="space-between">
              <Box>
                <Text size="sm" fw={600}>Mapped ViewPoint Link</Text>
                <Text size="xs"><strong>Account ID:</strong> {viewpointAccountId}</Text>
                <Text size="xs"><strong>Contact ID:</strong> {viewpointContactId || "N/A"}</Text>
                <Text size="xs"><strong>Club Type:</strong> {viewpointClub || "N/A"}</Text>
                <Group gap="xs" mt="xs">
                  <Badge color={viewpointIsActive ? "green" : "red"} size="sm">
                    {viewpointIsActive ? "Active Member" : "Inactive Member"}
                  </Badge>
                </Group>
              </Box>
              <Button size="xs" color="red" variant="light" onClick={handleUnlink}>
                Unlink Account
              </Button>
            </Group>
          </Card>
        ) : (
          <Alert color="yellow" title="Not Linked">
            This manager profile is not currently linked to a ViewPoint member account.
          </Alert>
        )}

        <Stack gap="xs" style={{ border: "1px solid var(--mantine-color-gray-3)", borderRadius: 8, padding: 12 }}>
          <Text size="sm" fw={500}>Search & Link ViewPoint Profile (Email or Member Number)</Text>
          <Group align="flex-end" gap="xs">
            <TextInput
              placeholder="Search by email or member number..."
              value={searchEmail}
              onChange={(e) => setSearchEmail(e.target.value)}
              size="xs"
              style={{ flexGrow: 1 }}
            />
            <Button size="xs" onClick={handleSearch} loading={loadingSearch} disabled={!searchEmail}>
              Search VP
            </Button>
          </Group>

          {loadingSearch && (
            <Center my="xs">
              <Loader size="sm" />
            </Center>
          )}

          {!loadingSearch && searchResults !== null && searchResults.length === 0 && (
            <Alert color="orange">No ViewPoint accounts match this search query.</Alert>
          )}

          {!loadingSearch && searchResults !== null && searchResults.length > 0 && (
            <Stack gap="xs" mt="xs" style={{ maxHeight: 200, overflowY: "auto" }}>
              {searchResults.map((account) => (
                <Card key={account.AccountID} withBorder padding="xs" radius="sm">
                  <Group justify="space-between" mb={4}>
                    <Text size="xs" fw={700}>{account.AccountName} <Badge size="xs" variant="light">{account.AccountType}</Badge></Text>
                    <Text size="xs" c="dimmed">ID: {account.AccountID}</Text>
                  </Group>
                  <Stack gap={4}>
                    {(account.Owners || []).concat(account.Contacts || []).map((contact: any) => (
                      <Group key={contact.ContactID} justify="space-between" wrap="nowrap" style={{ borderTop: "1px solid var(--mantine-color-gray-1)", paddingTop: 4 }}>
                        <Box>
                          <Text size="xs" fw={500}>{contact.FirstName} {contact.LastName} {contact.IsOwner && <Badge size="xs" color="violet">Owner</Badge>}</Text>
                          <Text size="xs" c="dimmed">{contact.Email}</Text>
                        </Box>
                        <Button size="xs" variant="subtle" onClick={() => handleLinkContact(account, contact)}>
                          Link
                        </Button>
                      </Group>
                    ))}
                  </Stack>
                </Card>
              ))}
            </Stack>
          )}
        </Stack>

        {/* Sticky so Save stays on screen while the ViewPoint search results
            push the rest of the form down. */}
        <Box
          style={{
            position: "sticky",
            bottom: 0,
            zIndex: 2,
            background: "var(--mantine-color-body)",
            borderTop: "1px solid var(--mantine-color-default-border)",
            marginInline: "calc(var(--mantine-spacing-md) * -1)",
            marginTop: "var(--mantine-spacing-sm)",
            padding: "var(--mantine-spacing-md)",
          }}
        >
          <Group justify="flex-end" grow={isMobile}>
            <Button variant="default" onClick={onClose} disabled={saving}>Cancel</Button>
            <Button onClick={handleSave} loading={saving}>Save Changes</Button>
          </Group>
        </Box>
      </Stack>
    </Modal>
  );
};