import React, { useState } from 'react';
import Header from './src/Header/Header';
import BenefitsSidebar from './src/BasicDetails/BenefitsSidebar';
import QuoteForm from './src/BasicDetails/QuoteForm';
import AIAdvisor from './Components/AIAdvisor';
import WhyChooseUs from './Components/WhyChooseUs';
import { FormData, InsuranceQuote, VehicleInfo } from './types';
import QuoteListPage from './src/Quotation/QuoteListPage';
import ProposalPage from './src/KYCDetails/ProposalPage';
import CheckoutPage from './src/VehicleDetails/CheckoutPage';
import BasicDetails from './src/BasicDetails';


const App: React.FC = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState<FormData>({
    registrationNumber: '',
    previousPolicyNumber: '',
    expiryDate: '',
    coverType: 'comprehensive',
    claimStatus: 'no',
    ncb: 0,
  });

  const [selectedQuote, setSelectedQuote] = useState<InsuranceQuote | null>(null);

  const vehicleInfo: VehicleInfo = {
    model: 'H NESS CB350 DLX2 DUALTONE',
    make: 'HONDA MOTORCYCLE AND SCOOTER INDIA (P) LTD',
    fuelType: 'PETROL',
    variant: 'HIGHNESS CB 350 DLX 2',
    registeredCity: 'R.T.O.BORIVALI, Maharashtra',
    registeredDate: '01-Feb-2021',
    chassisNumber: 'ME4NC586AMA005171',
    engineNumber: 'NC58EA1008396',
    previousPolicyNumber: '2546754321',
    previousInsurer: 'TATA General Insurance',
    previousPolicyEndDate: '2025-07-31',
    regNo: formData.registrationNumber || 'MH47AX9310'
  };

  const handleFormChange = (updates: Partial<FormData>) => {
    setFormData((prev) => ({ ...prev, ...updates }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setStep(2);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleBuyNow = (quote: InsuranceQuote) => {
    setSelectedQuote(quote);
    setStep(3);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const handleKycComplete = () => {
    setStep(4);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const userProfile = {
    name: 'Akanksha Sahai Srivastava',
    email: 'akshri.inv@gmail.com',
    avatarLetter: 'A'
  };

  return (
    <div className="min-h-screen flex flex-col bg-[#f8fafc]">
      <Header user={step >= 2 ? userProfile : undefined} />

      {step === 1 && (
        <BasicDetails
          formData={formData}
          onChange={handleFormChange}
          onSubmit={handleSubmit}
        />
      )}

      {step === 2 && (
        <QuoteListPage onBuyNow={handleBuyNow} />
      )}

      {step === 3 && selectedQuote && (
        <ProposalPage quote={selectedQuote} vehicle={vehicleInfo} onNext={handleKycComplete} />
      )}

      {step === 4 && selectedQuote && (
        <CheckoutPage quote={selectedQuote} vehicle={vehicleInfo} />
      )}

      <footer className="bg-white py-12 border-t border-slate-100 mt-auto">
        <div className="container mx-auto px-4 text-center">
          <div className="flex justify-center mb-6 opacity-30 grayscale">
            <div className="flex flex-col leading-none text-left">
              <span className="text-xl font-bold" style={{ color: '#1a2b4b', fontFamily: 'serif' }}>nivesh</span>
              <span className="text-[8px] font-bold tracking-[0.2em] uppercase" style={{ color: '#1a2b4b' }}>Insurance</span>
            </div>
          </div>
          <div className="max-w-3xl mx-auto space-y-3">
            <p className="text-slate-500 text-[10px] font-medium leading-relaxed">
              A wholly owned subsidiary of Providential Platforms Private Limited (<a href="https://www.nivesh.com" target="_blank" rel="noopener noreferrer" className="text-[#e31e24] hover:underline">https://www.nivesh.com</a>)
            </p>
            <p className="text-slate-400 text-[10px] font-medium leading-relaxed">
              Nivesh Insurance BROKERS PRIVATE LIMITED is a Direct Broker (Life & General) registered by IRDAI vide Registration Code IRDA/DB856/21, Certificate of Registration No. 769 valid upto 02-09-2027.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default App;