"use client";

import { useState } from "react";
import { submitBooking } from "@/app/actions/booking";

export default function BookingForm({ roomId, instaPayNumber, instaPayLink }: { roomId: string, instaPayNumber: string, instaPayLink: string }) {
  const [paymentMethod, setPaymentMethod] = useState("PAY_AT_HOTEL");
  const [isUploading, setIsUploading] = useState(false);
  const [receiptUrl, setReceiptUrl] = useState("");

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.[0]) return;
    
    setIsUploading(true);
    const formData = new FormData();
    formData.append("file", e.target.files[0]);

    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData,
      });
      const data = await res.json();
      if (data.success) {
        setReceiptUrl(data.url);
      } else {
        alert("Upload failed");
      }
    } catch (err) {
      console.error(err);
      alert("Upload failed");
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <form action={submitBooking} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
      <input type="hidden" name="roomId" value={roomId} />
      <input type="hidden" name="receiptUrl" value={receiptUrl} />
      
      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Full Name</label>
        <input type="text" name="guestName" required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }} />
      </div>

      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Email Address</label>
        <input type="email" name="guestEmail" required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }} />
      </div>

      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Phone Number</label>
        <input type="tel" name="guestPhone" style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }} />
      </div>

      <div className="grid grid-cols-2" style={{ gap: "1rem" }}>
        <div>
          <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Check-in Date</label>
          <input type="date" name="checkInDate" required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }} />
        </div>
        <div>
          <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Check-out Date</label>
          <input type="date" name="checkOutDate" required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }} />
        </div>
      </div>

      <hr style={{ border: "0", borderTop: "1px solid var(--border-light)", margin: "1rem 0" }} />

      <h3 style={{ fontSize: "1.25rem", fontWeight: "bold" }}>Payment Details</h3>
      
      <div>
        <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Payment Method</label>
        <select 
          name="paymentMethod" 
          value={paymentMethod}
          onChange={(e) => setPaymentMethod(e.target.value)}
          required 
          style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }}
        >
          <option value="PAY_AT_HOTEL">Pay at Hotel</option>
          <option value="VISA">Visa / Mastercard</option>
          <option value="INSTAPAY">InstaPay</option>
        </select>
      </div>

      {paymentMethod === "VISA" && (
        <div style={{ backgroundColor: "#f8fafc", padding: "1.5rem", borderRadius: "0.5rem", border: "1px solid #e2e8f0" }}>
          <p style={{ color: "#64748b", marginBottom: "1rem", fontSize: "0.875rem" }}>
            * This is a mock Visa checkout for demonstration purposes.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
            <div>
              <label style={{ display: "block", fontSize: "0.875rem", marginBottom: "0.25rem" }}>Card Number</label>
              <input type="text" placeholder="**** **** **** ****" required style={{ width: "100%", padding: "0.5rem", borderRadius: "0.25rem", border: "1px solid #cbd5e1" }} />
            </div>
            <div className="grid grid-cols-2" style={{ gap: "1rem" }}>
              <div>
                <label style={{ display: "block", fontSize: "0.875rem", marginBottom: "0.25rem" }}>Expiry Date</label>
                <input type="text" placeholder="MM/YY" required style={{ width: "100%", padding: "0.5rem", borderRadius: "0.25rem", border: "1px solid #cbd5e1" }} />
              </div>
              <div>
                <label style={{ display: "block", fontSize: "0.875rem", marginBottom: "0.25rem" }}>CVV</label>
                <input type="text" placeholder="123" required style={{ width: "100%", padding: "0.5rem", borderRadius: "0.25rem", border: "1px solid #cbd5e1" }} />
              </div>
            </div>
          </div>
        </div>
      )}

      {paymentMethod === "INSTAPAY" && (
        <div style={{ backgroundColor: "#f0fdf4", padding: "1.5rem", borderRadius: "0.5rem", border: "1px solid #bbf7d0" }}>
          <p style={{ fontWeight: "bold", color: "#166534", marginBottom: "0.5rem" }}>Pay via InstaPay</p>
          <p style={{ fontSize: "0.875rem", marginBottom: "1rem" }}>
            Please transfer the amount to: <strong>{instaPayNumber}</strong> 
            {instaPayLink && <span> or <a href={instaPayLink} target="_blank" rel="noreferrer" style={{ color: "#2563eb", textDecoration: "underline" }}>click here</a></span>}
          </p>
          
          <div style={{ marginBottom: "1rem" }}>
            <label style={{ display: "block", fontSize: "0.875rem", marginBottom: "0.25rem", fontWeight: "bold" }}>Amount Transferred</label>
            <input type="number" name="amountPaid" required placeholder="EGP" style={{ width: "100%", padding: "0.5rem", borderRadius: "0.25rem", border: "1px solid #cbd5e1" }} />
          </div>

          <div>
            <label style={{ display: "block", fontSize: "0.875rem", marginBottom: "0.25rem", fontWeight: "bold" }}>Upload Receipt Screenshot</label>
            <input type="file" accept="image/*" required onChange={handleFileUpload} style={{ width: "100%", padding: "0.5rem", backgroundColor: "white", borderRadius: "0.25rem", border: "1px solid #cbd5e1" }} />
            {isUploading && <span style={{ fontSize: "0.75rem", color: "#2563eb", marginTop: "0.25rem", display: "block" }}>Uploading...</span>}
            {receiptUrl && <span style={{ fontSize: "0.75rem", color: "#166534", marginTop: "0.25rem", display: "block" }}>Receipt uploaded successfully!</span>}
          </div>
        </div>
      )}

      <button type="submit" className="btn btn-primary" style={{ marginTop: "1rem", fontSize: "1.125rem", padding: "1rem" }} disabled={isUploading}>
        Confirm Booking
      </button>
    </form>
  );
}