'use client'

import { useState } from 'react'
import { useROICalculator } from '@/hooks/useROICalculator'
import { ROIInputPanel } from './ROIInputPanel'
import { ROIResultPanel } from './ROIResultPanel'
import { ROIEmailCapture } from './ROIEmailCapture'

export function ROICalculator() {
  const { inputs, results, setHoursPerWeek, setHourlyRate } = useROICalculator()
  const [captured, setCaptured] = useState(false)

  return (
    <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-start">
      {/* Inputs */}
      <div
        className="rounded-2xl p-6 md:p-8"
        style={{
          background: 'var(--dt-bg-surface)',
          border: '1px solid var(--dt-border-subtle)',
        }}
      >
        <h3 className="font-semibold text-lg mb-6" style={{ color: 'var(--dt-text-primary)' }}>
          Tell us about your workflow
        </h3>
        <ROIInputPanel
          hoursPerWeek={inputs.hoursPerWeek}
          hourlyRate={inputs.hourlyRate}
          onHoursChange={setHoursPerWeek}
          onRateChange={setHourlyRate}
        />

        {!captured && (
          <ROIEmailCapture
            results={results}
            inputs={inputs}
            onCaptured={() => setCaptured(true)}
          />
        )}

        {captured && (
          <div
            className="mt-6 p-4 rounded-xl text-center"
            style={{
              background: 'rgba(34, 197, 94, 0.08)',
              border: '1px solid rgba(34, 197, 94, 0.30)',
            }}
          >
            <p className="text-sm font-semibold" style={{ color: '#86efac' }}>
              Report unlocked — check your inbox!
            </p>
          </div>
        )}
      </div>

      {/* Results */}
      <div>
        <h3 className="font-semibold text-lg mb-6" style={{ color: 'var(--dt-text-primary)' }}>
          Your estimated opportunity
        </h3>
        <ROIResultPanel results={results} isGated={!captured} />
      </div>
    </div>
  )
}