'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

/**
 * Estimator UI. The calculation itself runs on the existing estimator service —
 * until that backend is attached, the result panel shows a clearly-labeled
 * sample so the flow can be reviewed end to end.
 */
export function EstimatorForm() {
  const [showResult, setShowResult] = useState(false)
  const [states, setStates] = useState('TX, OK, MO, IL')

  const stateList = states
    .split(/[,\s]+/)
    .map((s) => s.trim().toUpperCase())
    .filter((s) => /^[A-Z]{2}$/.test(s))

  return (
    <div className="mt-6 grid items-start gap-6 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">Load details</CardTitle>
        </CardHeader>
        <CardContent>
          <form
            className="space-y-4"
            onSubmit={(e) => {
              e.preventDefault()
              setShowResult(true)
            }}
          >
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="est-origin">Origin</Label>
                <Input id="est-origin" placeholder="Houston, TX" required />
              </div>
              <div className="space-y-2">
                <Label htmlFor="est-dest">Destination</Label>
                <Input id="est-dest" placeholder="Chicago, IL" required />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="est-states">States on the route</Label>
              <Input
                id="est-states"
                value={states}
                onChange={(e) => setStates(e.target.value)}
                placeholder="TX, OK, MO, IL"
              />
            </div>
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
              {[
                ['Width', `12'6"`],
                ['Height', `13'6"`],
                ['Length', `95'`],
                ['Weight', '145,000'],
              ].map(([label, ph]) => (
                <div key={label} className="space-y-2">
                  <Label>{label}</Label>
                  <Input placeholder={ph} />
                </div>
              ))}
            </div>
            <Button type="submit" className="w-full">
              Calculate estimate
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card className={showResult ? '' : 'opacity-60'}>
        <CardHeader>
          <CardTitle className="flex items-center justify-between text-base">
            Estimate
            <span className="rounded-full bg-amber-50 px-2.5 py-1 text-[10px] font-bold text-amber-800 ring-1 ring-inset ring-amber-200">
              SAMPLE — estimator service not connected
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          {!showResult ? (
            <p className="rounded-xl border border-dashed p-10 text-center text-sm text-neutral-500">
              Enter the load details and calculate to see the per-state breakdown.
            </p>
          ) : (
            <>
              <div className="divide-y">
                {(stateList.length > 0 ? stateList : ['TX', 'OK', 'MO', 'IL']).map((s) => (
                  <div key={s} className="flex items-center justify-between py-2.5 text-sm">
                    <span className="font-mono font-semibold">{s}</span>
                    <span className="text-neutral-400">$ —.—</span>
                  </div>
                ))}
              </div>
              <div className="mt-3 flex items-center justify-between border-t pt-3">
                <span className="text-sm font-bold">Estimated total</span>
                <span className="font-bold text-neutral-400">$ —.—</span>
              </div>
              <p className="mt-4 rounded-lg bg-neutral-50 p-3 text-xs text-neutral-500">
                Real per-state fees appear here once the estimator service is connected. Estimates
                are informational — final permit costs are confirmed at ordering.
              </p>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  )
}