import React, { useState, useEffect } from "react";
import { Drawer, Button, Select, NumberInput, TextInput, Group, Stack, Text, Alert } from "@mantine/core";
import { transferPoints } from "@/lib/features/points-transfer/query";
import type { Manager, HoldingBalancesResponse } from "@/lib/features/points-transfer/types";
import { notifications } from "@mantine/notifications";
import { useIsMobile } from "@/hooks/useIsMobile";

interface TransferPointsSidePanelProps {
  opened: boolean;
  onClose: () => void;
  managers: Manager[];
  balances: HoldingBalancesResponse | null;
  defaultManagerId?: string | null;
  onSuccess: () => void;
}

export const TransferPointsSidePanel: React.FC<TransferPointsSidePanelProps> = ({
  opened,
  onClose,
  managers,
  balances,
  defaultManagerId,
  onSuccess,
}) => {
  const isMobile = useIsMobile();
  const [selectedManagerId, setSelectedManagerId] = useState<string | null>(null);
  const [selectedHoldingAccount, setSelectedHoldingAccount] = useState<string | null>(null);
  const [points, setPoints] = useState<number | "">(0);
  const [notes, setNotes] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (opened) {
      const initialManagerId = defaultManagerId || null;
      setSelectedManagerId(initialManagerId);
      setPoints("");
      setNotes("");
      updateHoldingAccount(initialManagerId);
    }
  }, [opened, defaultManagerId]);

  const updateHoldingAccount = (managerId: string | null) => {
    if (!managerId || !balances) {
      setSelectedHoldingAccount(null);
      return;
    }
    const manager = managers.find(m => m.id === managerId);
    if (manager?.service_center === "INDIA") {
      setSelectedHoldingAccount(balances.india.account);
    } else {
      setSelectedHoldingAccount(balances.nonIndia?.account || null);
    }
  };

  const handleManagerChange = (val: string | null) => {
    setSelectedManagerId(val);
    updateHoldingAccount(val);
  };

  const maxPoints = selectedHoldingAccount && balances
    ? (selectedHoldingAccount === balances.india.account ? balances.india.balance : balances.nonIndia.balance)
    : 0;

  const handleSubmit = async () => {
    if (!selectedManagerId || typeof points !== "number" || points <= 0 || points > maxPoints) {
      notifications.show({
        title: "Validation Error",
        message: "Please check your inputs. Points must be valid and within the holding balance.",
        color: "red",
      });
      return;
    }

    setLoading(true);
    try {
      const res = await transferPoints({
        targetManagerId: selectedManagerId,
        points,
        notes,
      });

      if (res.success) {
        notifications.show({
          title: "Transfer Successful",
          message: `Successfully transferred ${points} points.`,
          color: "green",
        });
        onSuccess();
        onClose();
      } else {
        throw new Error(res.message || "Failed to transfer points");
      }
    } catch (err: any) {
      notifications.show({
        title: "Transfer Failed",
        message: err.message,
        color: "red",
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <Drawer
      opened={opened}
      onClose={onClose}
      title="Transfer Points"
      position="right"
      // A drawer sized "md" leaves a dead sliver of page on a phone and
      // squeezes the form; take the whole screen instead.
      size={isMobile ? "100%" : "md"}
    >
      <Stack gap="md">
        <Select
          label="Target Manager"
          placeholder="Select a resort manager"
          data={managers.map(m => ({ value: m.id, label: `${m.first_name} ${m.last_name || ""} (${m.email})` }))}
          value={selectedManagerId}
          onChange={handleManagerChange}
          disabled={!!defaultManagerId} // Locked if opened from a specific manager row
          searchable
          required
        />

        <Select
          label="Holding Account"
          placeholder="Select holding account"
          data={balances ? [
            { value: balances.india.account, label: `India Holding (${balances.india.balance} pts)` },
            { value: balances.nonIndia.account, label: `Non-India Holding (${balances.nonIndia.balance} pts)` }
          ] : []}
          value={selectedHoldingAccount}
          onChange={setSelectedHoldingAccount}
          disabled={!balances}
          required
        />

        {selectedHoldingAccount && (
          <Alert color="blue" title="Available Balance">
            You can transfer up to <strong>{maxPoints}</strong> points from this holding account.
          </Alert>
        )}

        <NumberInput
          label="Points to Transfer"
          placeholder="Enter points amount"
          value={points}
          onChange={(val) => setPoints(typeof val === 'number' ? val : "")}
          min={1}
          max={maxPoints}
          required
        />

        <TextInput
          label="Notes"
          placeholder="Optional notes for this transfer"
          value={notes}
          onChange={(e) => setNotes(e.currentTarget.value)}
        />

        <Group justify="flex-end" mt="md" grow={isMobile}>
          <Button variant="default" onClick={onClose} disabled={loading}>
            Cancel
          </Button>
          <Button onClick={handleSubmit} loading={loading}>
            Transfer
          </Button>
        </Group>
      </Stack>
    </Drawer>
  );
};