import React, { useState, useEffect, useContext } from "react";
import {
  Form,
  InputNumber,
  DatePicker,
  Button,
  Message,
  Typography,
  Card,
} from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import API_BASE_URL from "../config";
import { MarketContext, MARKET_FULL_NAMES } from "../App";

dayjs.extend(utc);
dayjs.extend(timezone);

const MARKET_TIMEZONES = {
  ISONE: "America/New_York",
  NYISO: "America/New_York",
  MISO: "America/Chicago",
};

function SubmitBidPage() {
  const { selectedMarket } = useContext(MarketContext);
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [localNow, setLocalNow] = useState("");
  const [marketNow, setMarketNow] = useState("");

  useEffect(() => {
    const updateTime = () => {
      const now = dayjs();
      const localFormatted = now.format("dddd, MMMM D, h:mm A");
      const marketTz = MARKET_TIMEZONES[selectedMarket] || "America/New_York";
      const marketTime = now.tz(marketTz);
      const marketFormatted = marketTime.format("dddd, MMMM D, h:mm A");
      setLocalNow(localFormatted);
      setMarketNow(marketFormatted);
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, [selectedMarket]);

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      const picked = dayjs(values.timestamp);
      const adjusted = picked.minute(0).second(0).millisecond(0);

      const marketTz = MARKET_TIMEZONES[selectedMarket] || "America/New_York";
      const timestampInMarketTz = adjusted.tz(marketTz).format();

      const payload = {
        timestamp: timestampInMarketTz,
        quantity: values.quantity,
        price: values.price,
        market: selectedMarket,
        user_id: 1,
      };

      const res = await fetch(`${API_BASE_URL}/bids/`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      if (!res.ok) {
        const error = await res.json();
        throw new Error(error.detail || "Failed to submit bid");
      }

      Message.success("Bid submitted successfully!");
      form.resetFields();
    } catch (err) {
      console.error(err);
      Message.error(err.message || "Submission failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      style={{
        padding: 20,
        backgroundColor: "var(--color-fill-2)",
        minHeight: "calc(100vh - 150px)",
        animation: "fadeSlideIn 0.6s ease",
      }}
    >
      <Typography.Title
        heading={3}
        style={{ textAlign: "center", marginBottom: 20 }}
      >
        Submit New Bid
      </Typography.Title>

      <Card
        style={{
          marginTop: 16,
          borderRadius: 16,
          boxShadow: "0 8px 24px rgba(0,0,0,0.08)",
          background:
            "linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%)",
          backdropFilter: "blur(8px)",
          overflow: "hidden",
          padding: 32,
        }}
      >
        <div
          style={{
            marginBottom: 32,
            padding: 16,
            border: "1px solid var(--color-border)",
            borderRadius: 8,
            background: "var(--color-fill-1)",
          }}
        >
          <Typography.Paragraph style={{ marginBottom: 8 }}>
            <strong>Current Local Time:</strong> {localNow}
          </Typography.Paragraph>
          <Typography.Paragraph>
            <strong>Current {MARKET_FULL_NAMES[selectedMarket]} Time:</strong>{" "}
            {marketNow}
          </Typography.Paragraph>
        </div>

        <Form
          form={form}
          layout="vertical"
          onSubmit={handleSubmit}
          initialValues={{ quantity: 0, price: 0 }}
          style={{ maxWidth: 600, margin: "0 auto" }}
        >
          <Form.Item
            label="Bid Date and Hour"
            field="timestamp"
            rules={[
              { required: true, message: "Please select bid date and hour" },
            ]}
          >
            <DatePicker
              showTime={{
                format: "h A",
                defaultValue: dayjs().hour(0).minute(0),
                disabledMinutes: () =>
                  Array.from({ length: 60 }, (_, i) => i !== 0),
                step: { minute: 60 },
              }}
              style={{ width: "100%" }}
              format="YYYY-MM-DD HH:00"
              placeholder="Select date and hour"
              timezone={MARKET_TIMEZONES[selectedMarket]}
            />
          </Form.Item>

          <Form.Item
            label="Quantity (MW)"
            field="quantity"
            rules={[
              { required: true, message: "Please enter quantity" },
              { type: "number", min: 0.01, message: "Quantity must be > 0" },
            ]}
          >
            <InputNumber
              style={{ width: "100%" }}
              placeholder="Enter quantity"
            />
          </Form.Item>

          <Form.Item
            label="Price ($/MWh)"
            field="price"
            rules={[
              { required: true, message: "Please enter price" },
              { type: "number", min: 0, message: "Price must be >= 0" },
            ]}
          >
            <InputNumber style={{ width: "100%" }} placeholder="Enter price" />
          </Form.Item>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              style={{
                width: "100%",
                transition: "transform 0.2s ease",
              }}
              onMouseEnter={(e) =>
                (e.currentTarget.style.transform = "scale(1.02)")
              }
              onMouseLeave={(e) =>
                (e.currentTarget.style.transform = "scale(1)")
              }
            >
              Submit Bid
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <style>{`
        @keyframes fadeSlideIn {
          0% {
            opacity: 0;
            transform: translateY(20px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
    </div>
  );
}

export default SubmitBidPage;