'use client'

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

export function SupportForm({ defaultName }: { defaultName: string }) {
  const [sent, setSent] = useState(false)

  return (
    <Card className="mt-8">
      <CardHeader>
        <CardTitle className="text-base">Contact the team</CardTitle>
        <CardDescription>
          Preview — the support inbox connects with the email service. During the pilot, reach us
          directly instead.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {sent ? (
          <p className="rounded-xl border border-dashed p-6 text-center text-sm text-neutral-600">
            ✓ Thanks! This form is a preview — during the pilot, please also reach the team
            directly so nothing is missed.
          </p>
        ) : (
          <form
            className="space-y-4"
            onSubmit={(e) => {
              e.preventDefault()
              setSent(true)
              toast.info('Preview — the support inbox is not connected yet.')
            }}
          >
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="s-name">Name</Label>
                <Input id="s-name" defaultValue={defaultName} />
              </div>
              <div className="space-y-2">
                <Label htmlFor="s-topic">Topic</Label>
                <select id="s-topic" className="h-9 w-full rounded-md border px-3 text-sm">
                  {['Question', 'Bug report', 'Billing', 'Feature request', 'Other'].map((t) => (
                    <option key={t}>{t}</option>
                  ))}
                </select>
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="s-msg">Message</Label>
              <Textarea id="s-msg" rows={4} required placeholder="How can we help?" />
            </div>
            <Button type="submit">Send message</Button>
          </form>
        )}
      </CardContent>
    </Card>
  )
}