'use client'

import * as React from 'react'
import { useRouter } from 'next/navigation'
import { Save, ArrowLeft, UserPlus } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { FieldGroup, Field, FieldLabel } from '@/components/ui/field'
import { Separator } from '@/components/ui/separator'

interface OwnerFormProps {
  mode?: 'create' | 'edit'
  initialData?: Record<string, unknown>
}

export function OwnerForm({ mode = 'create', initialData }: OwnerFormProps) {
  const router = useRouter()
  const [isSubmitting, setIsSubmitting] = React.useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsSubmitting(false)
    router.push('/dashboard/proprietarios')
  }

  return (
    <form onSubmit={handleSubmit} className="max-w-2xl">
      <div className="space-y-8">
        {/* Personal Information */}
        <section className="bg-card rounded-xl border border-border/50 p-6">
          <h2 className="text-lg font-semibold text-foreground mb-4">
            Dados Pessoais
          </h2>
          <FieldGroup className="space-y-4">
            <Field>
              <FieldLabel htmlFor="name">Nome Completo</FieldLabel>
              <Input
                id="name"
                placeholder="Nome do proprietário"
                required
              />
            </Field>

            <div className="grid sm:grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="cpf">CPF</FieldLabel>
                <Input
                  id="cpf"
                  placeholder="000.000.000-00"
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="rg">RG</FieldLabel>
                <Input
                  id="rg"
                  placeholder="00.000.000-0"
                />
              </Field>
            </div>
          </FieldGroup>
        </section>

        {/* Contact Information */}
        <section className="bg-card rounded-xl border border-border/50 p-6">
          <h2 className="text-lg font-semibold text-foreground mb-4">
            Contato
          </h2>
          <FieldGroup className="space-y-4">
            <Field>
              <FieldLabel htmlFor="email">E-mail</FieldLabel>
              <Input
                id="email"
                type="email"
                placeholder="email@exemplo.com"
                required
              />
            </Field>

            <div className="grid sm:grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="phone">Telefone</FieldLabel>
                <Input
                  id="phone"
                  type="tel"
                  placeholder="(00) 00000-0000"
                  required
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="phone2">Telefone Secundário</FieldLabel>
                <Input
                  id="phone2"
                  type="tel"
                  placeholder="(00) 00000-0000"
                />
              </Field>
            </div>
          </FieldGroup>
        </section>

        {/* Address */}
        <section className="bg-card rounded-xl border border-border/50 p-6">
          <h2 className="text-lg font-semibold text-foreground mb-4">
            Endereço
          </h2>
          <FieldGroup className="space-y-4">
            <div className="grid sm:grid-cols-3 gap-4">
              <Field className="sm:col-span-2">
                <FieldLabel htmlFor="street">Rua</FieldLabel>
                <Input
                  id="street"
                  placeholder="Nome da rua"
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="number">Número</FieldLabel>
                <Input
                  id="number"
                  placeholder="000"
                />
              </Field>
            </div>

            <div className="grid sm:grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="complement">Complemento</FieldLabel>
                <Input
                  id="complement"
                  placeholder="Apto, bloco, etc."
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="neighborhood">Bairro</FieldLabel>
                <Input
                  id="neighborhood"
                  placeholder="Nome do bairro"
                />
              </Field>
            </div>

            <div className="grid sm:grid-cols-3 gap-4">
              <Field>
                <FieldLabel htmlFor="city">Cidade</FieldLabel>
                <Input
                  id="city"
                  placeholder="Nome da cidade"
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="state">Estado</FieldLabel>
                <Input
                  id="state"
                  placeholder="UF"
                  maxLength={2}
                />
              </Field>

              <Field>
                <FieldLabel htmlFor="zipcode">CEP</FieldLabel>
                <Input
                  id="zipcode"
                  placeholder="00000-000"
                />
              </Field>
            </div>
          </FieldGroup>
        </section>

        {/* Notes */}
        <section className="bg-card rounded-xl border border-border/50 p-6">
          <h2 className="text-lg font-semibold text-foreground mb-4">
            Observações
          </h2>
          <Field>
            <FieldLabel htmlFor="notes">Notas internas</FieldLabel>
            <Textarea
              id="notes"
              placeholder="Informações adicionais sobre o proprietário..."
              rows={4}
            />
          </Field>
        </section>

        {/* Form Actions */}
        <div className="flex items-center justify-between pt-4">
          <Button
            type="button"
            variant="ghost"
            onClick={() => router.back()}
          >
            <ArrowLeft className="size-4 mr-2" />
            Voltar
          </Button>
          <Button
            type="submit"
            disabled={isSubmitting}
            className="bg-primary text-primary-foreground hover:bg-primary/90"
          >
            {isSubmitting ? (
              'Salvando...'
            ) : (
              <>
                <Save className="size-4 mr-2" />
                {mode === 'create' ? 'Cadastrar Proprietário' : 'Salvar Alterações'}
              </>
            )}
          </Button>
        </div>
      </div>
    </form>
  )
}