// components/vendors/VendorDetailPage.tsx
'use client'

import { useState } from 'react'
import { Vendor, VendorType, VendorStatus } from '@prisma/client'
import { VendorHeader } from './VendorHeader'
import { ContactCard } from './ContactCard'
import { FinancialCard } from './FinancialCard'
import { NotesCard } from './NotesCard'
import { SidebarCards } from './SidebarCard'
import { EditVendorModal } from './EditVendorModal'

interface VendorWithEvents extends Vendor {
  address: {
    street: string
    city: string
    state: string
    zip: number
  } | null
  events: Array<{
    id: string
    name: string
    date: Date | null
  }>
}

interface VendorDetailPageProps {
  vendor: VendorWithEvents
}

export function VendorDetailPage({ vendor }: VendorDetailPageProps) {
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
  const [currentVendor, setCurrentVendor] = useState(vendor)

  const handleSave = async (updatedVendor: any) => {
    setCurrentVendor(updatedVendor)
  }

  return (
    <>
      <div className="container mx-auto py-6 space-y-6">
        <VendorHeader 
          vendor={currentVendor} 
          onEditClick={() => setIsEditModalOpen(true)} 
        />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Main Info */}
          <div className="lg:col-span-2 space-y-6">
            <ContactCard
              contactPerson={currentVendor.contactPerson}
              email={currentVendor.email}
              phone={currentVendor.phone}
              website={currentVendor.website}
              address={currentVendor.address}
            />

            <FinancialCard
              quotedPrice={currentVendor.quotedPrice}
              finalCost={currentVendor.finalCost}
              depositPaid={currentVendor.depositPaid}
              depositDueDate={currentVendor.depositDueDate}
              finalPaymentDue={currentVendor.finalPaymentDue}
              paymentNotes={currentVendor.paymentNotes}
            />

            <NotesCard
              notes={currentVendor.notes}
              contractUrl={currentVendor.contractUrl}
              proposalUrl={currentVendor.proposalUrl}
            />
          </div>

          {/* Right Column - Sidebar */}
          <SidebarCards
            description={currentVendor.description}
            events={currentVendor.events}
            timeline={{
              createdAt: currentVendor.createdAt,
              bookedDate: currentVendor.bookedDate,
              depositDueDate: currentVendor.depositDueDate,
              finalPaymentDue: currentVendor.finalPaymentDue,
            }}
            vendorId={currentVendor.id}
          />
        </div>
      </div>

      <EditVendorModal
        vendor={currentVendor}
        isOpen={isEditModalOpen}
        onClose={() => setIsEditModalOpen(false)}
        onSave={handleSave}
      />
    </>
  )
}