import React, { useState } from "react";

// DJB Bill Payment Mockup - Single-file React component
// TailwindCSS classes used. Designed for quick preview and handoff.

export default function DjbBillPaymentMockup() {
  const [consumerNo, setConsumerNo] = useState("");
  const [mobile, setMobile] = useState("");
  const [loading, setLoading] = useState(false);
  const [bill, setBill] = useState(null);
  const [paid, setPaid] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState("upi");

  // Dummy fetch simulating an API call
  const fetchBill = async () => {
    setLoading(true);
    setPaid(false);
    setBill(null);
    await new Promise((r) => setTimeout(r, 700));
    // sample returned bill
    const sample = {
      name: "Smt. Priti Sabhlok",
      address: "A-12, Model Town, Delhi",
      period: "Oct 2025",
      amount: 2340,
      surchargeWaived: true,
      dueDate: "2026-01-31",
      consumerNo: consumerNo || "1234-5678",
    };
    setBill(sample);
    setLoading(false);
  };

  const payNow = async () => {
    if (!bill) return;
    setLoading(true);
    await new Promise((r) => setTimeout(r, 900));
    setPaid(true);
    setLoading(false);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-sky-50 to-white text-slate-800">
      {/* Header */}
      <header className="max-w-5xl mx-auto px-6 py-6 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <div className="w-12 h-12 rounded-full bg-white shadow flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 text-sky-600" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M3 12h18M3 6h18M3 18h18" />
            </svg>
          </div>
          <div>
            <h1 className="text-lg font-semibold">Delhi Jal Board</h1>
            <p className="text-sm text-slate-500">Dilli Ka Paani, Dilli Ka Vishwas</p>
          </div>
        </div>
        <nav className="hidden md:flex gap-4 items-center text-sm">
          <a className="px-3 py-2 rounded hover:bg-slate-100">Home</a>
          <a className="px-3 py-2 rounded bg-sky-50 border border-sky-100">Pay Bill</a>
          <a className="px-3 py-2 rounded hover:bg-slate-100">Rebates</a>
          <a className="px-3 py-2 rounded hover:bg-slate-100">Help</a>
        </nav>
      </header>

      <main className="max-w-5xl mx-auto px-6 pb-20">
        <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {/* Left Column - Payment Card */}
          <div className="md:col-span-2 bg-white rounded-2xl shadow p-6">
            <h2 className="text-xl font-semibold mb-2">Pay Your Water Bill</h2>
            <p className="text-sm text-slate-500 mb-4">Enter your consumer number to fetch the latest bill. 100% late payment surcharge waiver — pay before <span className="font-medium">{bill?.dueDate ?? '31 January 2026'}</span>.</p>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 items-end">
              <label className="col-span-2">
                <span className="text-xs text-slate-600">Consumer Number / KNO</span>
                <input value={consumerNo} onChange={(e)=>setConsumerNo(e.target.value)} className="mt-1 w-full p-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-200" placeholder="e.g., 1234-5678" />
              </label>
              <label>
                <span className="text-xs text-slate-600">Mobile / Email (opt)</span>
                <input value={mobile} onChange={(e)=>setMobile(e.target.value)} className="mt-1 w-full p-3 rounded-lg border border-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-200" placeholder="+91 98765 43210" />
              </label>

              <div className="sm:col-span-3 flex gap-3 mt-2">
                <button onClick={fetchBill} disabled={loading} className="px-4 py-3 bg-sky-600 text-white rounded-lg shadow hover:bg-sky-700 disabled:opacity-60">{loading ? 'Fetching...' : 'Fetch Bill'}</button>
                <button onClick={()=>{setConsumerNo('1234-5678'); setMobile('9876543210')}} className="px-4 py-3 border rounded-lg">Try sample</button>
              </div>
            </div>

            {/* Bill Summary */}
            <div className="mt-6 border border-slate-100 rounded-lg p-4 bg-slate-50">
              {bill ? (
                <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                  <div>
                    <div className="text-sm text-slate-600">Consumer</div>
                    <div className="font-medium">{bill.name}</div>
                    <div className="text-xs text-slate-500">{bill.address}</div>
                    <div className="text-xs text-slate-500 mt-1">Billing Period: {bill.period}</div>
                  </div>

                  <div className="text-right">
                    <div className="text-sm text-slate-600">Amount Due</div>
                    <div className="text-2xl font-bold">₹{bill.amount}</div>
                    <div className="text-xs text-green-600 mt-1">Late Payment Surcharge: <span className="font-semibold">Waived</span></div>
                    <div className="text-xs text-slate-500 mt-1">Pay by: <span className="font-medium">{bill.dueDate}</span></div>
                  </div>
                </div>
              ) : (
                <div className="text-sm text-slate-600">No bill loaded. Enter consumer number and click <span className="font-semibold">Fetch Bill</span>.</div>
              )}
            </div>

            {/* Payment Options + CTA */}
            <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
              <div className="md:col-span-2">
                <div className="text-sm text-slate-600 mb-2">Choose Payment Method</div>
                <div className="flex gap-2 flex-wrap">
                  <label className={`p-3 border rounded-lg cursor-pointer ${paymentMethod==='upi' ? 'border-sky-500 bg-sky-50' : ''}`}>
                    <input type="radio" name="pm" checked={paymentMethod==='upi'} onChange={()=>setPaymentMethod('upi')} className="hidden" />
                    <div className="text-sm font-medium">UPI</div>
                    <div className="text-xs text-slate-500">GooglePay, PhonePe, Paytm</div>
                  </label>

                  <label className={`p-3 border rounded-lg cursor-pointer ${paymentMethod==='card' ? 'border-sky-500 bg-sky-50' : ''}`}>
                    <input type="radio" name="pm" checked={paymentMethod==='card'} onChange={()=>setPaymentMethod('card')} className="hidden" />
                    <div className="text-sm font-medium">Card</div>
                    <div className="text-xs text-slate-500">Debit / Credit</div>
                  </label>

                  <label className={`p-3 border rounded-lg cursor-pointer ${paymentMethod==='netbank' ? 'border-sky-500 bg-sky-50' : ''}`}>
                    <input type="radio" name="pm" checked={paymentMethod==='netbank'} onChange={()=>setPaymentMethod('netbank')} className="hidden" />
                    <div className="text-sm font-medium">Netbanking</div>
                    <div className="text-xs text-slate-500">Bank transfer</div>
                  </label>
                </div>

                <div className="mt-4">
                  <button onClick={payNow} disabled={!bill || loading} className="px-6 py-3 bg-emerald-600 text-white rounded-lg shadow hover:bg-emerald-700 disabled:opacity-60">{loading ? 'Processing...' : (paid ? 'Paid ✓' : 'Pay Now')}</button>
                </div>
              </div>

              {/* Right column small info */}
              <div className="bg-white rounded-lg border p-4">
                <div className="text-sm font-semibold mb-2">Rebate Info</div>
                <div className="text-xs text-slate-600">100% Late Payment Surcharge waiver if paid by <span className="font-medium">{bill?.dueDate ?? '31 January 2026'}</span>. Partial waiver schedule applies thereafter.</div>
                <a href="#" className="inline-block mt-3 text-sm text-sky-600">Know full terms</a>
              </div>
            </div>

            {/* Post-payment message */}
            {paid && (
              <div className="mt-4 p-4 rounded-lg bg-emerald-50 border border-emerald-100 text-emerald-800">
                Payment successful. Thank you for clearing your dues and supporting Dilli Ka Paani — Dilli Ka Vishwas.
              </div>
            )}
          </div>

          {/* Right Column - Outreach / Help */}
          <aside className="space-y-4">
            <div className="bg-white rounded-2xl shadow p-4">
              <h3 className="text-sm font-semibold mb-2">Need Help?</h3>
              <p className="text-xs text-slate-600">Call: <span className="font-medium">1916</span></p>
              <p className="text-xs text-slate-600">Email: <span className="font-medium">support@djb.gov.in</span></p>
              <button className="mt-3 w-full px-4 py-2 border rounded-lg">Chat with Seva Bot</button>
            </div>

            <div className="bg-white rounded-2xl shadow p-4">
              <h3 className="text-sm font-semibold mb-2">DJB Vishwas Camps</h3>
              <ul className="text-xs text-slate-600 space-y-2">
                <li><span className="font-medium">Model Town Community Hall</span><br/>Sat & Sun, 10am–4pm</li>
                <li><span className="font-medium">Sultanpuri RWA Centre</span><br/>Weekdays, 11am–3pm</li>
                <li><a href="#" className="text-sky-600">View all camps</a></li>
              </ul>
            </div>

            <div className="bg-gradient-to-r from-sky-600 to-emerald-500 text-white rounded-2xl p-4">
              <h4 className="font-semibold">Quick Links</h4>
              <ul className="text-sm mt-2 space-y-1">
                <li>Check Bill Status</li>
                <li>Apply for New Connection</li>
                <li>Rebate Terms</li>
              </ul>
            </div>
          </aside>
        </section>

        {/* Info footer */}
        <section className="mt-8 bg-white rounded-lg p-4 border">
          <h4 className="text-sm font-semibold">How the waiver works</h4>
          <p className="text-xs text-slate-600 mt-2">DJB is waiving late payment surcharge for domestic consumers who settle outstanding principal by the deadline. This portal helps you check dues and pay securely. For queries, contact 1916.</p>
        </section>
      </main>

      <footer className="border-t py-6 mt-8">
        <div className="max-w-5xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between text-sm text-slate-500">
          <div>© Delhi Jal Board — Har Boond Ka Hisaab, Vishwas Ke Saath</div>
          <div className="mt-3 md:mt-0">Follow us: <span className="ml-2">Facebook • Instagram • X</span></div>
        </div>
      </footer>
    </div>
  );
}