'use client';

import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { toast } from "react-hot-toast";
import { Toaster } from '@/components/ui/toaster';
import Image from 'next/image';

export default function ReferralPage() {
  const [form, setForm] = useState({
    yourName: '',
    yourMobile: '',
    yourEmail: '',
    product: '',
    friendName: '',
    friendMobile: '',
    preferredTime: '',
  });

  const [submitting, setSubmitting] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async () => {
    setSubmitting(true);
    try {
      const res = await fetch('/api/referral', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (data.success) {
        toast.success('Referral submitted successfully!');
        setForm({
          yourName: '',
          yourMobile: '',
          yourEmail: '',
          product: '',
          friendName: '',
          friendMobile: '',
          preferredTime: '',
        });
      } else {
        toast.error('Submission failed.');
      }
    } catch (err) {
      console.error(err);
      toast.error('Something went wrong.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col">
      {/* Header */}
      <header className="text-center py-10 px-4">
        <h1 className="text-4xl font-bold text-blue-700 mb-4">Refer and Earn</h1>
        <p className="text-gray-600 max-w-2xl mx-auto">
          Invite your friends and family to explore our exclusive offers! When they join through your referral,
          both of you benefit. Fill out the form below and let us handle the rest.
        </p>
      </header>

      {/* Form Section */}
      <main className="flex-grow flex items-center justify-center px-4 py-8">
        <div className="bg-white shadow-lg rounded-lg max-w-6xl w-full grid grid-cols-1 md:grid-cols-2 overflow-hidden">
          {/* Left: Form */}
          <div className="p-8 space-y-4">
            <h2 className="text-2xl font-bold text-blue-600">Referral Form</h2>
            <p className="text-sm text-gray-500">Submit your details and your friend&apos;s info below.</p>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <Input name="yourName" placeholder="Your Name" value={form.yourName} onChange={handleChange} />
              <Input name="yourMobile" placeholder="Mobile No." value={form.yourMobile} onChange={handleChange} />
              <Input name="yourEmail" placeholder="Email ID" value={form.yourEmail} onChange={handleChange} />
              <Input name="product" placeholder="Product" value={form.product} onChange={handleChange} />
              <Input name="friendMobile" placeholder="Friend's Mobile No." value={form.friendMobile} onChange={handleChange} />
              <Input name="preferredTime" placeholder="Preferred Time to Call" value={form.preferredTime} onChange={handleChange} />
              <Input name="friendName" placeholder="Friend's Name" value={form.friendName} onChange={handleChange} />
            </div>

            <Button onClick={handleSubmit} disabled={submitting} className="w-full py-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
              {submitting ? 'Submitting...' : 'Submit'}
            </Button>
              {/* T&C section */}
            <p className="text-gray-600 text-xs mt-4">
              By clicking on &#34;Submit&#34;, I confirm that the person I am referring has agreed that their personal contact information can be shared with BF Fintech commercial Brokers LLC and that they are aware that they will be receiving communication from 8 F Fintech commercial Brokers LLC.
            </p>
          </div>

          {/* Right: Image */}
          <div className="hidden md:block relative w-full h-auto min-h-[500px] bg-blue-100">
            <Image
              src="/referral-banner.avif"
              alt="Referral Illustration"
              fill
              className="object-cover"
            />
          </div>
        </div>
      </main>

      {/* Footer Info */}
      <footer className="text-center px-4 py-10 bg-blue-50">
        <h3 className="text-xl font-semibold text-blue-700 mb-2">Why Refer?</h3>
        <p className="text-gray-600 max-w-3xl mx-auto">
          Referring is a great way to share great opportunities with people you care about. Plus, you both
          benefit from our special offers. Start sharing today and make a difference!
        </p>
      </footer>

      <Toaster />
    </div>
  );
}