"use client"

import type React from "react"

import { useState } from "react"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Mail, MessageSquare, Phone, MapPin } from "lucide-react"
import { useTranslation } from "@/lib/i18n"
import Link from "next/link"

export default function ContactPage() {
  const [submitted, setSubmitted] = useState(false)
  const { t } = useTranslation()
  const [ticketId, setTicketId] = useState<string | null>(null)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Simulate API call
    setTimeout(() => {
      const id = `TKT-${Math.floor(Math.random() * 9000) + 1000}`
      setTicketId(id)
      setSubmitted(true)
    }, 1000)
  }

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="bg-muted/30 py-16 md:py-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-6 text-balance">
                {t("contact.hero.title")}
              </h1>
              <p className="text-lg text-muted-foreground text-pretty">{t("contact.hero.subtitle")}</p>
            </div>
          </div>
        </section>

        {/* Contact Section */}
        <section className="py-16 md:py-24">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12">
              {/* Contact Form */}
              <Card>
                <CardHeader>
                  <CardTitle>{t("contact.form.title")}</CardTitle>
                  <CardDescription>{t("contact.form.description")}</CardDescription>
                </CardHeader>
                <CardContent>
                  {submitted ? (
                    <div className="text-center py-8 space-y-4 animate-in fade-in zoom-in">
                      <div className="mx-auto w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                        <MessageSquare className="h-6 w-6" />
                      </div>
                      <h3 className="text-xl font-bold">{t("contact.form.actions.success")}</h3>
                      <p className="text-muted-foreground">
                        {t("contact.form.ticket_label", { defaultValue: "Your Ticket ID:" })}
                      </p>
                      <div className="text-2xl font-mono font-bold text-primary bg-primary/10 py-2 rounded">
                        {ticketId}
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {t("contact.form.ticket_desc", { defaultValue: "Save this ID for future reference." })}
                      </p>
                      <Button variant="outline" onClick={() => { setSubmitted(false); setTicketId(null); }}>
                        {t("contact.form.send_another", { defaultValue: "Send another message" })}
                      </Button>
                    </div>
                  ) : (
                    <form onSubmit={handleSubmit} className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor="name">{t("contact.form.fields.name.label")}</Label>
                        <Input id="name" placeholder={t("contact.form.fields.name.placeholder")} required />
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="email">{t("contact.form.fields.email.label")}</Label>
                        <Input id="email" type="email" placeholder={t("contact.form.fields.email.placeholder")} required />
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="subject">{t("contact.form.fields.subject.label")}</Label>
                        <Input id="subject" placeholder={t("contact.form.fields.subject.placeholder")} required />
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="message">{t("contact.form.fields.message.label")}</Label>
                        <Textarea
                          id="message"
                          placeholder={t("contact.form.fields.message.placeholder")}
                          rows={5}
                          required
                        />
                      </div>

                      <Button type="submit" className="w-full cursor-pointer" disabled={submitted}>
                        {t("contact.form.actions.submit")}
                      </Button>
                    </form>
                  )}
                </CardContent>
              </Card>

              {/* Contact Info */}
              <div className="space-y-8">
                <div>
                  <h2 className="text-2xl font-bold mb-6">{t("contact.info.title")}</h2>
                  <div className="space-y-6">
                    <div className="flex items-start gap-4">
                      <div className="p-3 rounded-lg bg-primary/10">
                        <Mail className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <h3 className="font-semibold mb-1">{t("contact.info.email.title")}</h3>
                        <p className="text-sm text-muted-foreground">hello@gohorsejobs.com</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-4">
                      <div className="p-3 rounded-lg bg-primary/10">
                        <Phone className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <h3 className="font-semibold mb-1">{t("contact.info.phone.title")}</h3>
                        <p className="text-sm text-muted-foreground">(11) 9999-9999</p>
                      </div>
                    </div>

                    <div className="flex items-start gap-4">
                      <div className="p-3 rounded-lg bg-primary/10">
                        <MapPin className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <h3 className="font-semibold mb-1">{t("contact.info.address.title")}</h3>
                        <p className="text-sm text-muted-foreground">
                          1000 Paulista Ave
                          <br />
                          São Paulo, SP - 01310-100
                        </p>
                      </div>
                    </div>

                    <div className="flex items-start gap-4">
                      <div className="p-3 rounded-lg bg-primary/10">
                        <MessageSquare className="h-5 w-5 text-primary" />
                      </div>
                      <div>
                        <h3 className="font-semibold mb-1">{t("contact.info.support.title")}</h3>
                        <p className="text-sm text-muted-foreground">{t("contact.info.support.description")}</p>
                      </div>
                    </div>
                  </div>
                </div>

                <Card className="bg-muted/50">
                  <CardContent className="pt-6">
                    <h3 className="font-semibold mb-2">{t("contact.faq.title")}</h3>
                    <p className="text-sm text-muted-foreground mb-4">{t("contact.faq.description")}</p>
                    <Link href="/faq">
                      <Button variant="outline" className="w-full cursor-pointer bg-transparent">
                        {t("contact.faq.button")}
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}
