import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";

import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  List,
  ListItemButton,
  ListItemText,
  Paper,
  Tab,
  Tabs,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
} from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";

import { api } from "../api";
import { useToast } from "../toast";
import { CorrespondenceMessage, GmailMessageSummary, GmailStatus } from "../types";

function parseRawEmail(raw: string): {
  subject?: string;
  date?: string;
  from?: string;
  to?: string;
  body: string;
} {
  const lines = raw.replace(/\r\n/g, "\n").split("\n");
  const headers: Record<string, string> = {};
  let i = 0;

  for (; i < lines.length; i++) {
    const line = lines[i];
    if (line.trim() === "") {
      i++;
      break;
    }

    const idx = line.indexOf(":");
    if (idx <= 0) continue;

    const k = line.slice(0, idx).trim().toLowerCase();
    const v = line.slice(idx + 1).trim();
    headers[k] = headers[k] ? `${headers[k]} ${v}` : v;
  }

  const body = lines.slice(i).join("\n").trim();
  const subject = headers["subject"];
  const from = headers["from"];
  const to = headers["to"];
  const dateRaw = headers["date"];

  let iso: string | undefined = undefined;
  if (dateRaw) {
    const d = new Date(dateRaw);
    if (!Number.isNaN(+d)) iso = d.toISOString();
  }

  return { subject, from, to, date: iso, body };
}

export default function Correspondence({ jobId }: { jobId: number }) {
  const theme = useTheme();
  const { toast } = useToast();
  const [messages, setMessages] = useState<CorrespondenceMessage[]>([]);
  const [from, setFrom] = useState<"Me" | "Company">("Me");
  const [text, setText] = useState("");
  const scrollRef = useRef<HTMLDivElement | null>(null);

  const [importOpen, setImportOpen] = useState(false);
  const [importTab, setImportTab] = useState(0);
  const [rawEmail, setRawEmail] = useState("");

  const [gmailStatus, setGmailStatus] = useState<GmailStatus | null>(null);
  const [gmailLoading, setGmailLoading] = useState(false);
  const [gmailQuery, setGmailQuery] = useState("");
  const [gmailMessages, setGmailMessages] = useState<GmailMessageSummary[]>([]);
  const [gmailMessagesLoading, setGmailMessagesLoading] = useState(false);
  const [importingMessageId, setImportingMessageId] = useState<string | null>(null);

  const load = useCallback(async () => {
    const res = await api.get<CorrespondenceMessage[]>(`/correspondence/${jobId}`);
    setMessages(res.data);
  }, [jobId]);

  const loadGmailStatus = useCallback(async () => {
    try {
      setGmailLoading(true);
      const res = await api.get<GmailStatus>("/gmail/status");
      setGmailStatus(res.data);
    } catch {
      setGmailStatus({ connected: false });
    } finally {
      setGmailLoading(false);
    }
  }, []);

  const loadGmailMessages = useCallback(async () => {
    try {
      setGmailMessagesLoading(true);
      const res = await api.get<GmailMessageSummary[]>("/gmail/messages", {
        params: {
          query: gmailQuery.trim() || undefined,
          maxResults: 12,
        },
      });
      setGmailMessages(res.data);
    } catch {
      toast("Failed to load Gmail messages.", "error");
    } finally {
      setGmailMessagesLoading(false);
    }
  }, [gmailQuery, toast]);

  useEffect(() => {
    void load();
  }, [load]);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
  }, [messages.length]);

  useEffect(() => {
    if (!importOpen) return;
    void loadGmailStatus();
  }, [importOpen, loadGmailStatus]);

  useEffect(() => {
    if (!importOpen || importTab !== 1 || !gmailStatus?.connected) return;
    void loadGmailMessages();
  }, [importOpen, importTab, gmailStatus?.connected, loadGmailMessages]);

  useEffect(() => {
    const onMessage = (event: MessageEvent) => {
      const data = event.data as { source?: string; status?: string; message?: string };
      if (data?.source !== "jobtracker-gmail-oauth") return;
      if (data.status === "connected") {
        toast(data.message || "Gmail connected.", "success");
        void loadGmailStatus();
        setImportTab(1);
        void loadGmailMessages();
      } else {
        toast(data.message || "Gmail connection failed.", "error");
      }
    };

    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [loadGmailMessages, loadGmailStatus, toast]);

  const canSend = useMemo(() => text.trim().length > 0, [text]);

  const send = async () => {
    if (!canSend) return;

    try {
      await api.post("/correspondence", {
        jobApplicationId: jobId,
        from,
        content: text,
      });

      setText("");
      await load();
    } catch {
      toast("Failed to add message.", "error");
    }
  };

  const importEmail = async () => {
    const parsed = parseRawEmail(rawEmail);
    if (!parsed.body && !parsed.subject && !rawEmail.trim()) {
      toast("Paste an email first.", "error");
      return;
    }

    try {
      await api.post("/correspondence", {
        jobApplicationId: jobId,
        from,
        channel: "Email",
        subject: parsed.subject ?? null,
        content: parsed.body || rawEmail,
        date: parsed.date ?? null,
      });

      setImportOpen(false);
      setRawEmail("");
      await load();
      toast("Email logged.", "success");
    } catch {
      toast("Failed to import email.", "error");
    }
  };

  const connectGmail = async () => {
    try {
      const res = await api.get<{ url: string }>("/gmail/connect-url");
      const popup = window.open(res.data.url, "jobtracker-gmail-connect", "width=620,height=760,resizable=yes,scrollbars=yes");
      if (!popup) {
        toast("Your browser blocked the Gmail popup.", "error");
      }
    } catch {
      toast("Failed to start Gmail connection.", "error");
    }
  };

  const disconnectGmail = async () => {
    try {
      await api.delete("/gmail/connection");
      setGmailStatus({ connected: false });
      setGmailMessages([]);
      toast("Gmail disconnected.", "success");
    } catch {
      toast("Failed to disconnect Gmail.", "error");
    }
  };

  const importGmailMessage = async (messageId: string) => {
    try {
      setImportingMessageId(messageId);
      await api.post("/gmail/import", {
        jobApplicationId: jobId,
        messageId,
      });
      await load();
      toast("Email imported from Gmail.", "success");
    } catch (error: any) {
      const message =
        error?.response?.data && typeof error.response.data === "string"
          ? error.response.data
          : "Failed to import Gmail message.";
      toast(message, "error");
    } finally {
      setImportingMessageId(null);
    }
  };

  return (
    <Box>
      <Paper
        ref={scrollRef}
        sx={{
          p: 1.5,
          maxHeight: 360,
          overflowY: "auto",
          background:
            theme.palette.mode === "dark"
              ? "rgba(15,23,42,0.45)"
              : "rgba(255,255,255,0.75)",
          backdropFilter: "blur(8px)",
        }}
      >
        {messages.length === 0 ? (
          <Typography sx={{ color: "text.secondary", py: 2, textAlign: "center" }}>
            No messages yet.
          </Typography>
        ) : (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {messages.map((m) => {
              const isMe = (m.from || "").toLowerCase() === "me";
              const accent = isMe ? theme.palette.primary.main : theme.palette.warning.main;
              return (
                <Box
                  key={m.id}
                  sx={{
                    display: "flex",
                    justifyContent: isMe ? "flex-end" : "flex-start",
                  }}
                >
                  <Box
                    sx={{
                      maxWidth: "80%",
                      borderRadius: 3,
                      p: 1.25,
                      border: `1px solid ${alpha(
                        accent,
                        theme.palette.mode === "dark" ? 0.32 : 0.22,
                      )}`,
                      background: alpha(accent, theme.palette.mode === "dark" ? 0.14 : 0.1),
                      color: "text.primary",
                    }}
                  >
                    {m.subject ? (
                      <Typography sx={{ fontWeight: 800, mb: 0.5 }}>
                        {m.subject}
                      </Typography>
                    ) : null}

                    <Typography sx={{ whiteSpace: "pre-wrap", lineHeight: 1.35 }}>
                      {m.content}
                    </Typography>

                    <Typography
                      variant="caption"
                      sx={{ display: "block", mt: 0.75, color: "text.secondary" }}
                    >
                      {isMe ? "Me" : "Company"}
                      {m.channel ? ` · ${m.channel}` : ""}
                      {m.date ? ` · ${new Date(m.date).toLocaleString()}` : ""}
                    </Typography>
                  </Box>
                </Box>
              );
            })}
          </Box>
        )}
      </Paper>

      <Box sx={{ display: "flex", gap: 1, alignItems: "center", mt: 1.5, flexWrap: "wrap" }}>
        <ToggleButtonGroup
          exclusive
          value={from}
          onChange={(_, v) => {
            if (v) setFrom(v);
          }}
          size="small"
        >
          <ToggleButton value="Me">Me</ToggleButton>
          <ToggleButton value="Company">Company</ToggleButton>
        </ToggleButtonGroup>

        <Button variant="outlined" size="small" onClick={() => setImportOpen(true)}>
          Import Email
        </Button>

        <Box sx={{ flex: "1 1 280px" }}>
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Log an email/call note..."
            style={{
              width: "100%",
              minHeight: 70,
              resize: "vertical",
              padding: 10,
              borderRadius: 12,
              border:
                theme.palette.mode === "dark"
                  ? "1px solid rgba(148,163,184,0.25)"
                  : "1px solid rgba(15,23,42,0.12)",
              background: theme.palette.mode === "dark" ? "rgba(2,6,23,0.25)" : "white",
              color: theme.palette.text.primary,
              fontFamily: "inherit",
              fontSize: 14,
            }}
          />
        </Box>

        <Button variant="contained" onClick={send} disabled={!canSend}>
          Add
        </Button>
      </Box>

      <Dialog open={importOpen} onClose={() => setImportOpen(false)} fullWidth maxWidth="md">
        <DialogTitle>Import Email</DialogTitle>
        <DialogContent>
          <Tabs value={importTab} onChange={(_, v) => setImportTab(v)} sx={{ mb: 2 }}>
            <Tab label="Paste email" />
            <Tab label="Gmail" />
          </Tabs>

          {importTab === 0 ? (
            <>
              <Typography sx={{ color: "text.secondary", mb: 1 }}>
                Paste raw email text (headers optional). We parse Subject and Date when present.
              </Typography>
              <textarea
                value={rawEmail}
                onChange={(e) => setRawEmail(e.target.value)}
                placeholder={"Subject: ...\nDate: ...\nFrom: ...\nTo: ...\n\nBody..."}
                style={{
                  width: "100%",
                  minHeight: 220,
                  resize: "vertical",
                  padding: 12,
                  borderRadius: 12,
                  border:
                    theme.palette.mode === "dark"
                      ? "1px solid rgba(148,163,184,0.25)"
                      : "1px solid rgba(15,23,42,0.12)",
                  background: theme.palette.mode === "dark" ? "rgba(2,6,23,0.25)" : "white",
                  color: theme.palette.text.primary,
                  fontFamily: "inherit",
                  fontSize: 14,
                }}
              />
            </>
          ) : (
            <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
              <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
                <Box>
                  <Typography sx={{ fontWeight: 800 }}>Google Gmail</Typography>
                  <Typography variant="body2" sx={{ color: "text.secondary" }}>
                    {gmailLoading ? "Checking connection..." : gmailStatus?.connected ? `Connected as ${gmailStatus.gmailAddress}` : "Connect your Gmail account to browse recent emails."}
                  </Typography>
                </Box>
                <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                  {gmailStatus?.connected ? (
                    <>
                      <Button variant="outlined" onClick={() => void loadGmailMessages()} disabled={gmailMessagesLoading}>
                        Refresh
                      </Button>
                      <Button variant="outlined" color="error" onClick={() => void disconnectGmail()}>
                        Disconnect
                      </Button>
                    </>
                  ) : (
                    <Button variant="contained" onClick={() => void connectGmail()}>
                      Connect Gmail
                    </Button>
                  )}
                </Box>
              </Box>

              {gmailStatus?.connected ? (
                <>
                  <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
                    <TextField
                      label="Search Gmail"
                      value={gmailQuery}
                      onChange={(e) => setGmailQuery(e.target.value)}
                      placeholder="from:company@example.com OR interview"
                      size="small"
                      fullWidth
                    />
                    <Button variant="outlined" onClick={() => void loadGmailMessages()} disabled={gmailMessagesLoading}>
                      Search
                    </Button>
                  </Box>
                  {gmailStatus.lastSyncedAt ? (
                    <Chip label={`Last synced ${new Date(gmailStatus.lastSyncedAt).toLocaleString()}`} size="small" />
                  ) : null}
                  <Paper variant="outlined" sx={{ maxHeight: 360, overflowY: "auto" }}>
                    {gmailMessagesLoading ? (
                      <Box sx={{ py: 5, display: "flex", justifyContent: "center" }}>
                        <CircularProgress size={28} />
                      </Box>
                    ) : gmailMessages.length === 0 ? (
                      <Typography sx={{ color: "text.secondary", p: 2 }}>No Gmail messages found.</Typography>
                    ) : (
                      <List disablePadding>
                        {gmailMessages.map((message, index) => (
                          <React.Fragment key={message.id}>
                            {index > 0 ? <Divider /> : null}
                            <ListItemButton sx={{ alignItems: "flex-start", py: 1.5 }}>
                              <ListItemText
                                primary={
                                  <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
                                    <Typography sx={{ fontWeight: 800 }}>{message.subject || "(No subject)"}</Typography>
                                    <Typography variant="caption" sx={{ color: "text.secondary" }}>
                                      {message.date ? new Date(message.date).toLocaleString() : ""}
                                    </Typography>
                                  </Box>
                                }
                                secondary={
                                  <Box sx={{ mt: 0.5 }}>
                                    <Typography variant="body2" sx={{ color: "text.primary" }}>
                                      From: {message.from || "Unknown"}
                                    </Typography>
                                    <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25 }}>
                                      {message.snippet}
                                    </Typography>
                                  </Box>
                                }
                              />
                              <Button
                                variant="contained"
                                size="small"
                                disabled={importingMessageId === message.id}
                                onClick={() => void importGmailMessage(message.id)}
                              >
                                {importingMessageId === message.id ? "Importing..." : "Import"}
                              </Button>
                            </ListItemButton>
                          </React.Fragment>
                        ))}
                      </List>
                    )}
                  </Paper>
                </>
              ) : null}
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setImportOpen(false)}>Close</Button>
          {importTab === 0 ? (
            <Button variant="contained" onClick={importEmail}>
              Log Email
            </Button>
          ) : null}
        </DialogActions>
      </Dialog>
    </Box>
  );
}