import { useAppBridge } from "@saleor/app-sdk/app-bridge";
import {
  Box,
  Text,
  Button,
  Chip,
  Divider,
  List,
  ListItem,
  ListItemText,
  CircularProgress,
  Alert,
  Accordion,
  AccordionSummary,
  AccordionDetails,
} from "@saleor/macaw-ui";
import { NextPage } from "next";
import { useEffect, useState } from "react";

interface WebhookStatus {
  name: string;
  event: string;
  active: boolean;
  targetUrl: string;
}

interface AppInfo {
  name: string;
  version: string;
  id: string;
}

const DashboardPage: NextPage = () => {
  const { appBridgeState } = useAppBridge();
  const [mounted, setMounted] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setMounted(true);
    // Simulate loading app data
    setTimeout(() => setLoading(false), 1000);
  }, []);

  const webhooks: WebhookStatus[] = [
    {
      name: "Order Created",
      event: "ORDER_CREATED",
      active: true,
      targetUrl: "N8N Workflow",
    },
    {
      name: "Order Fulfilled",
      event: "ORDER_FULFILLED",
      active: true,
      targetUrl: "N8N Workflow",
    },
    {
      name: "Order Cancelled",
      event: "ORDER_CANCELLED",
      active: true,
      targetUrl: "N8N Workflow",
    },
  ];

  const appInfo: AppInfo = {
    name: "Core Extensions",
    version: "1.0.0",
    id: "saleor-core-extensions",
  };

  if (!mounted) {
    return (
      <Box display="flex" justifyContent="center" alignItems="center" height="100vh">
        <CircularProgress />
      </Box>
    );
  }

  if (loading) {
    return (
      <Box padding={8}>
        <Box display="flex" alignItems="center" gap={2}>
          <CircularProgress size={24} />
          <Text>Loading dashboard...</Text>
        </Box>
      </Box>
    );
  }

  return (
    <Box padding={8}>
      {/* Header */}
      <Box marginBottom={8}>
        <Text size={11} as="h1">
          Core Extensions Dashboard
        </Text>
        <Text color="textSecondary" marginTop={2}>
          Email automation for ManoonOils
        </Text>
      </Box>

      {/* Connection Status */}
      <Box marginBottom={8}>
        <Text size={8} as="h2" marginBottom={4}>
          Connection Status
        </Text>
        {appBridgeState?.ready ? (
          <Alert severity="success">
            <Box display="flex" alignItems="center" gap={2}>
              <Chip size="small" color="success">
                Connected
              </Chip>
              <Text>Connected to Saleor Dashboard</Text>
            </Box>
          </Alert>
        ) : (
          <Alert severity="warning">
            <Box display="flex" alignItems="center" gap={2}>
              <Chip size="small" color="warning">
                Standalone
              </Chip>
              <Text>Running outside Saleor Dashboard</Text>
            </Box>
          </Alert>
        )}
      </Box>

      <Divider />

      {/* Webhooks Section */}
      <Box marginY={8}>
        <Text size={8} as="h2" marginBottom={4}>
          Webhooks Configuration
        </Text>
        <Text marginBottom={4} color="textSecondary">
          Active webhooks forwarding to N8N
        </Text>

        <List>
          {webhooks.map((webhook) => (
            <ListItem key={webhook.event}>
              <Box
                display="flex"
                alignItems="center"
                justifyContent="space-between"
                width="100%"
              >
                <ListItemText
                  primary={webhook.name}
                  secondary={webhook.event}
                />
                <Box display="flex" alignItems="center" gap={2}>
                  <Text color="textSecondary" size={2}>
                    {webhook.targetUrl}
                  </Text>
                  <Chip size="small" color={webhook.active ? "success" : "error"}>
                    {webhook.active ? "Active" : "Inactive"}
                  </Chip>
                </Box>
              </Box>
            </ListItem>
          ))}
        </List>
      </Box>

      <Divider />

      {/* Email Configuration */}
      <Box marginY={8}>
        <Text size={8} as="h2" marginBottom={4}>
          Email Configuration
        </Text>

        <Accordion>
          <AccordionSummary>
            <Text>Customer Emails</Text>
          </AccordionSummary>
          <AccordionDetails>
            <Box display="flex" flexDirection="column" gap={2}>
              <Box display="flex" justifyContent="space-between">
                <Text>From:</Text>
                <Text>support@mail.manoonoils.com</Text>
              </Box>
              <Box display="flex" justifyContent="space-between">
                <Text>Provider:</Text>
                <Text>Resend</Text>
              </Box>
              <Box display="flex" justifyContent="space-between">
                <Text>Templates:</Text>
                <Text>Order Confirmation, Order Shipped, Order Cancelled</Text>
              </Box>
            </Box>
          </AccordionDetails>
        </Accordion>

        <Accordion>
          <AccordionSummary>
            <Text>Admin Notifications</Text>
          </AccordionSummary>
          <AccordionDetails>
            <Box display="flex" flexDirection="column" gap={2}>
              <Box display="flex" justifyContent="space-between">
                <Text>Recipients:</Text>
                <Text>me@hytham.me, tamara@hytham.me</Text>
              </Box>
              <Box display="flex" justifyContent="space-between">
                <Text>Subject:</Text>
                <Text>New Order! 🎉 #{orderNumber}</Text>
              </Box>
              <Box display="flex" justifyContent="space-between">
                <Text>Trigger:</Text>
                <Text>All order events</Text>
              </Box>
            </Box>
          </AccordionDetails>
        </Accordion>
      </Box>

      <Divider />

      {/* App Info */}
      <Box marginY={8}>
        <Text size={8} as="h2" marginBottom={4}>
          App Information
        </Text>
        <Box display="flex" flexDirection="column" gap={2}>
          <Box display="flex" justifyContent="space-between">
            <Text>Name:</Text>
            <Text>{appInfo.name}</Text>
          </Box>
          <Box display="flex" justifyContent="space-between">
            <Text>Version:</Text>
            <Text>{appInfo.version}</Text>
          </Box>
          <Box display="flex" justifyContent="space-between">
            <Text>ID:</Text>
            <Text>{appInfo.id}</Text>
          </Box>
        </Box>
      </Box>

      <Divider />

      {/* Actions */}
      <Box marginTop={8} display="flex" gap={4}>
        <Button
          variant="secondary"
          onClick={() => {
            window.open("https://n8n.nodecrew.me", "_blank");
          }}
        >
          Open N8N
        </Button>
        <Button
          variant="secondary"
          onClick={() => {
            window.open("https://resend.com/emails", "_blank");
          }}
        >
          View Resend Emails
        </Button>
      </Box>
    </Box>
  );
};

export default DashboardPage;
