'use client';

import React, { useState } from 'react';
import { ShieldCheck, Lock, CheckCircle2 } from 'lucide-react';
import Link from 'next/link';

export default function CheckoutPage() {
  const [formData, setFormData] = useState({
    customer_name: 'Rahul Sharma',
    customer_email: 'rahul.sharma@example.com',
    customer_phone: '+91 98765 43210',
    shipping_address: 'Flat 402, Green Valley Apartments, MG Road',
    shipping_city: 'Bengaluru',
    shipping_state: 'Karnataka',
    shipping_postal_code: '560001'
  });

  const [isProcessing, setIsProcessing] = useState(false);
  const [orderComplete, setOrderComplete] = useState<string | null>(null);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handlePlaceOrder = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsProcessing(true);

    // Simulating call to DRF /api/orders/create/ and /api/payments/verify/
    setTimeout(() => {
      setIsProcessing(false);
      setOrderComplete('EV-A89F20C1');
    }, 1500);
  };

  if (orderComplete) {
    return (
      <div className="max-w-xl mx-auto px-4 py-16 text-center">
        <div className="bg-white border border-slate-200 rounded-2xl p-8 shadow-sm">
          <div className="bg-emerald-100 text-emerald-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <CheckCircle2 className="w-10 h-10" />
          </div>
          <span className="text-xs font-bold uppercase tracking-wider text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full">
            Payment Verified & Confirmed
          </span>
          <h1 className="text-2xl font-black text-slate-900 mt-4">Order Placed Successfully!</h1>
          <p className="text-slate-500 text-sm mt-2">
            Your EV battery pack order <strong className="text-slate-800">#{orderComplete}</strong> has been confirmed.
          </p>

          <div className="mt-6 p-4 bg-slate-50 border border-slate-100 rounded-xl text-left text-xs text-slate-600 space-y-1.5">
            <p><strong>Shipping To:</strong> {formData.customer_name}, {formData.shipping_city}, {formData.shipping_postal_code}</p>
            <p><strong>Logistics Handling:</strong> UN38.3 Dangerous Goods Transport Unit</p>
            <p><strong>Tracking Number:</strong> Assigned within 24 hours of warehouse dispatch</p>
          </div>

          <div className="mt-8 flex flex-col sm:flex-row gap-3">
            <Link
              href="/"
              className="flex-1 bg-slate-900 hover:bg-slate-800 text-white font-semibold text-xs py-3 px-4 rounded-xl transition"
            >
              Return to Storefront
            </Link>
            <Link
              href="/account"
              className="flex-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 font-semibold text-xs py-3 px-4 rounded-xl border border-emerald-200 transition"
            >
              View Order History
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight mb-8">Secure Checkout</h1>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Shipping Form */}
        <div className="lg:col-span-2 bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
          <h2 className="font-bold text-slate-900 text-base mb-4 pb-2 border-b border-slate-100 flex items-center space-x-2">
            <Lock className="w-4 h-4 text-emerald-600" />
            <span>Shipping & Recipient Details</span>
          </h2>

          <form onSubmit={handlePlaceOrder} className="space-y-4 text-sm">
            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">Full Recipient Name</label>
              <input
                type="text"
                name="customer_name"
                value={formData.customer_name}
                onChange={handleInputChange}
                required
                className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
              />
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Email Address (For Invoices)</label>
                <input
                  type="email"
                  name="customer_email"
                  value={formData.customer_email}
                  onChange={handleInputChange}
                  required
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Contact Phone Number</label>
                <input
                  type="tel"
                  name="customer_phone"
                  value={formData.customer_phone}
                  onChange={handleInputChange}
                  required
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-semibold text-slate-700 mb-1">Street Delivery Address</label>
              <input
                type="text"
                name="shipping_address"
                value={formData.shipping_address}
                onChange={handleInputChange}
                required
                className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
              />
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">City</label>
                <input
                  type="text"
                  name="shipping_city"
                  value={formData.shipping_city}
                  onChange={handleInputChange}
                  required
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">State</label>
                <input
                  type="text"
                  name="shipping_state"
                  value={formData.shipping_state}
                  onChange={handleInputChange}
                  required
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-700 mb-1">Postal PIN Code</label>
                <input
                  type="text"
                  name="shipping_postal_code"
                  value={formData.shipping_postal_code}
                  onChange={handleInputChange}
                  required
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500"
                />
              </div>
            </div>

            {/* Payment Method Option */}
            <div className="mt-6 pt-4 border-t border-slate-100">
              <label className="block text-xs font-semibold text-slate-700 mb-2">Verified Payment Gateway</label>
              <div className="border border-emerald-500 bg-emerald-50/50 p-4 rounded-xl flex items-center justify-between">
                <div>
                  <p className="font-bold text-slate-900 text-xs">Razorpay Online Gateway</p>
                  <p className="text-[11px] text-slate-500 mt-0.5">UPI (Google Pay, PhonePe, Paytm), Credit/Debit Cards, NetBanking</p>
                </div>
                <span className="text-[10px] bg-emerald-700 text-white font-bold px-2 py-0.5 rounded">
                  Instant Verification
                </span>
              </div>
            </div>

            <button
              type="submit"
              disabled={isProcessing}
              className="mt-6 w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-400 text-white font-bold py-3.5 px-4 rounded-xl transition flex items-center justify-center space-x-2 text-sm shadow-md shadow-emerald-600/25"
            >
              <Lock className="w-4 h-4" />
              <span>{isProcessing ? 'Verifying & Initializing Razorpay...' : 'Pay ₹23,849 via Razorpay'}</span>
            </button>
          </form>
        </div>

        {/* Order Review Sidebar */}
        <div className="bg-white border border-slate-200 rounded-xl p-6 h-fit space-y-4 shadow-sm">
          <h3 className="font-bold text-slate-900 text-sm pb-2 border-b border-slate-100">Items in Order</h3>
          <div className="text-xs text-slate-700 space-y-2">
            <div className="flex justify-between">
              <div>
                <p className="font-semibold text-slate-900">Voltix Pro 48V 30Ah LiFePO4</p>
                <p className="text-slate-400 text-[10px]">Qty: 1 • Grade-A LFP Cells</p>
              </div>
              <span className="font-bold">₹19,999</span>
            </div>
          </div>

          <div className="border-t border-slate-100 pt-3 space-y-1.5 text-xs text-slate-600">
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>₹19,999</span>
            </div>
            <div className="flex justify-between">
              <span>GST (18%)</span>
              <span>₹3,600</span>
            </div>
            <div className="flex justify-between">
              <span>Hazardous Transport</span>
              <span>₹250</span>
            </div>
            <div className="flex justify-between pt-2 border-t border-slate-200 text-slate-900 font-bold text-sm">
              <span>Payable Total</span>
              <span className="text-emerald-700 font-extrabold text-base">₹23,849</span>
            </div>
          </div>

          <div className="p-3 bg-slate-50 rounded-lg text-[11px] text-slate-500 space-y-1">
            <p className="flex items-center text-slate-700 font-semibold">
              <ShieldCheck className="w-3.5 h-3.5 text-emerald-600 mr-1" />
              Backend Cryptographic Verification
            </p>
            <p>Orders are confirmed and inventory reserved strictly upon cryptographic HMAC-SHA256 signature verification.</p>
          </div>
        </div>
      </div>
    </div>
  );
}