import { useEffect, useMemo, useState } from 'react'
import { Shell } from '../layouts/Shell'
import { apiClient } from '../services/apiClient'

interface Company {
    id: string
    cnpj: string
    corporate_name: string
    category: string
    license_number: string
    is_verified: boolean
    city: string
    state: string
    latitude: number
    longitude: number
    phone: string
    operating_hours: string
    is_24_hours: boolean
    created_at: string
    updated_at: string
}

interface CompanyRating {
    company_id: string
    average_score: number
    total_reviews: number
}

interface User {
    id: string
    company_id: string
    role: string
    name: string
    username: string
    email: string
    email_verified: boolean
    created_at: string
}

interface UserPage {
    users: User[]
    total: number
    page: number
    page_size: number
}

type ShippingMethodType = 'pickup' | 'own_delivery' | 'third_party_delivery'

interface ShippingMethod {
    id: string
    vendor_id: string
    type: ShippingMethodType
    active: boolean
    preparation_minutes: number
    max_radius_km: number
    min_fee_cents: number
    price_per_km_cents: number
    free_shipping_threshold_cents?: number | null
    pickup_address: string
    pickup_hours: string
    created_at: string
    updated_at: string
}

interface ShippingMethodDraft {
    type: ShippingMethodType
    active: boolean
    preparation_minutes: number
    max_radius_km: number
    min_fee_reais: string
    price_per_km_reais: string
    free_shipping_threshold_reais: string
    pickup_address: string
    pickup_hours: string
}

const tabs = [
    { id: 'overview', label: 'Dados da empresa' },
    { id: 'users', label: 'Usuários' },
    { id: 'shipping', label: 'Frete' }
]

const categoryLabels: Record<string, string> = {
    farmacia: 'Farmácia',
    distribuidora: 'Distribuidora',
    admin: 'Administrador'
}

const shippingLabels: Record<ShippingMethodType, string> = {
    pickup: 'Retirada no local',
    own_delivery: 'Entrega própria',
    third_party_delivery: 'Entrega via terceiros'
}

const formatDate = (value: string) => new Date(value).toLocaleDateString('pt-BR')

const formatCurrency = (value: number) =>
    value.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })

const centsToReaisString = (value?: number | null) =>
    value ? (value / 100).toFixed(2) : '0.00'

const parseNumber = (value: string) => {
    const parsed = Number.parseFloat(value.replace(',', '.'))
    return Number.isNaN(parsed) ? 0 : parsed
}

const createDefaultShippingDraft = (): ShippingMethodDraft[] => [
    {
        type: 'pickup',
        active: false,
        preparation_minutes: 30,
        max_radius_km: 0,
        min_fee_reais: '0.00',
        price_per_km_reais: '0.00',
        free_shipping_threshold_reais: '',
        pickup_address: '',
        pickup_hours: ''
    },
    {
        type: 'own_delivery',
        active: false,
        preparation_minutes: 45,
        max_radius_km: 10,
        min_fee_reais: '5.00',
        price_per_km_reais: '1.50',
        free_shipping_threshold_reais: '',
        pickup_address: '',
        pickup_hours: ''
    },
    {
        type: 'third_party_delivery',
        active: false,
        preparation_minutes: 60,
        max_radius_km: 15,
        min_fee_reais: '8.00',
        price_per_km_reais: '2.00',
        free_shipping_threshold_reais: '',
        pickup_address: '',
        pickup_hours: ''
    }
]

const mergeShippingDrafts = (methods: ShippingMethod[]) => {
    const defaults = createDefaultShippingDraft()
    return defaults.map((fallback) => {
        const existing = methods.find((method) => method.type === fallback.type)
        if (!existing) {
            return fallback
        }
        return {
            type: existing.type,
            active: existing.active,
            preparation_minutes: existing.preparation_minutes,
            max_radius_km: existing.max_radius_km,
            min_fee_reais: centsToReaisString(existing.min_fee_cents),
            price_per_km_reais: centsToReaisString(existing.price_per_km_cents),
            free_shipping_threshold_reais: existing.free_shipping_threshold_cents
                ? centsToReaisString(existing.free_shipping_threshold_cents)
                : '',
            pickup_address: existing.pickup_address,
            pickup_hours: existing.pickup_hours
        }
    })
}

export function CompanyPage() {
    const [company, setCompany] = useState<Company | null>(null)
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)
    const [editing, setEditing] = useState(false)
    const [activeTab, setActiveTab] = useState('overview')
    const [rating, setRating] = useState<CompanyRating | null>(null)
    const [ratingError, setRatingError] = useState<string | null>(null)
    const [users, setUsers] = useState<User[]>([])
    const [usersLoading, setUsersLoading] = useState(false)
    const [usersError, setUsersError] = useState<string | null>(null)
    const [usersMeta, setUsersMeta] = useState({ total: 0, page: 1, page_size: 20 })
    const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([])
    const [shippingDraft, setShippingDraft] = useState<ShippingMethodDraft[]>(createDefaultShippingDraft())
    const [shippingLoading, setShippingLoading] = useState(false)
    const [shippingError, setShippingError] = useState<string | null>(null)
    const [shippingEditing, setShippingEditing] = useState(false)
    const [form, setForm] = useState({
        corporate_name: '',
        license_number: '',
        phone: '',
        operating_hours: '',
        is_24_hours: false,
        city: '',
        state: ''
    })
    // User editing state
    const [editingUser, setEditingUser] = useState<User | null>(null)
    const [userForm, setUserForm] = useState({ name: '', email: '', role: '' })

    const handleDeleteUser = async (userId: string) => {
        if (!confirm('Tem certeza que deseja excluir este usuário?')) return
        try {
            await apiClient.delete(`/v1/users/${userId}`)
            if (company) void loadUsers(company.id)
        } catch (err) {
            console.error('Erro ao excluir usuário:', err)
            setUsersError('Erro ao excluir usuário')
        }
    }

    const handleSaveUser = async () => {
        if (!editingUser) return
        try {
            await apiClient.patch(`/v1/users/${editingUser.id}`, {
                name: userForm.name,
                email: userForm.email,
                role: userForm.role
            })
            setEditingUser(null)
            if (company) void loadUsers(company.id)
        } catch (err) {
            console.error('Erro ao salvar usuário:', err)
            setUsersError('Erro ao salvar usuário')
        }
    }

    useEffect(() => {
        loadCompany()
    }, [])

    const loadCompany = async () => {
        try {
            setLoading(true)
            const data = await apiClient.get<Company>('/v1/companies/me')
            setCompany(data)
            setForm({
                corporate_name: data.corporate_name,
                license_number: data.license_number,
                phone: data.phone || '',
                operating_hours: data.operating_hours || '',
                is_24_hours: data.is_24_hours || false,
                city: data.city,
                state: data.state
            })
            setError(null)
            void loadUsers(data.id)
            void loadShipping(data.id)
            void loadRating(data.id)
        } catch (err) {
            setError('Erro ao carregar dados da empresa')
            console.error(err)
        } finally {
            setLoading(false)
        }
    }

    const loadUsers = async (companyId: string) => {
        try {
            setUsersLoading(true)
            const data = await apiClient.get<UserPage>(`/v1/users?page=1&page_size=50&company_id=${companyId}`)
            setUsers(data.users || [])
            setUsersMeta({
                total: data.total,
                page: data.page,
                page_size: data.page_size
            })
            setUsersError(null)
        } catch (err) {
            console.error('Erro ao carregar usuários:', err)
            setUsersError('Erro ao carregar usuários da empresa')
        } finally {
            setUsersLoading(false)
        }
    }

    const loadShipping = async (companyId: string) => {
        try {
            setShippingLoading(true)
            const data = await apiClient.get<ShippingMethod[]>(`/v1/shipping/settings/${companyId}`)
            setShippingMethods(data || [])
            setShippingDraft(mergeShippingDrafts(data || []))
            setShippingError(null)
        } catch (err) {
            console.error('Erro ao carregar frete:', err)
            setShippingMethods([])
            setShippingDraft(createDefaultShippingDraft())
            setShippingError('Erro ao carregar configurações de frete')
        } finally {
            setShippingLoading(false)
        }
    }

    const loadRating = async (companyId: string) => {
        try {
            const data = await apiClient.get<CompanyRating>(`/v1/companies/${companyId}/rating`)
            setRating(data)
            setRatingError(null)
        } catch (err) {
            console.error('Erro ao carregar avaliação:', err)
            setRating(null)
            setRatingError('Erro ao carregar avaliação da empresa')
        }
    }

    const saveChanges = async () => {
        if (!company) return
        try {
            await apiClient.put(`/v1/companies/${company.id}`, form)
            await loadCompany()
            setEditing(false)
        } catch (err) {
            console.error('Erro ao salvar:', err)
        }
    }

    const saveShippingSettings = async () => {
        if (!company) return
        const pickupMethod = shippingDraft.find((method) => method.type === 'pickup')
        if (pickupMethod?.active) {
            if (!pickupMethod.pickup_address.trim() || !pickupMethod.pickup_hours.trim()) {
                setShippingError('Informe o endereço e o horário de retirada para ativar a retirada no local.')
                return
            }
        }
        const invalidDelivery = shippingDraft.find(
            (method) =>
                method.active &&
                method.type !== 'pickup' &&
                (!method.max_radius_km || method.max_radius_km <= 0)
        )
        if (invalidDelivery) {
            setShippingError('Informe um raio máximo válido para métodos de entrega ativos.')
            return
        }
        const invalidFreeShipping = shippingDraft.find((method) => {
            if (!method.active || !method.free_shipping_threshold_reais.trim()) {
                return false
            }
            return parseNumber(method.free_shipping_threshold_reais) <= 0
        })
        if (invalidFreeShipping) {
            setShippingError('Informe um valor válido para o frete grátis quando o método estiver ativo.')
            return
        }
        try {
            setShippingLoading(true)
            const payload = {
                methods: shippingDraft.map((method) => ({
                    type: method.type,
                    active: method.active,
                    preparation_minutes: method.preparation_minutes,
                    max_radius_km: method.max_radius_km,
                    min_fee_cents: Math.round(parseNumber(method.min_fee_reais) * 100),
                    price_per_km_cents: Math.round(parseNumber(method.price_per_km_reais) * 100),
                    free_shipping_threshold_cents: method.free_shipping_threshold_reais
                        ? Math.round(parseNumber(method.free_shipping_threshold_reais) * 100)
                        : undefined,
                    pickup_address: method.pickup_address,
                    pickup_hours: method.pickup_hours
                }))
            }
            await apiClient.put(`/v1/shipping/settings/${company.id}`, payload)
            setShippingEditing(false)
            await loadShipping(company.id)
        } catch (err) {
            console.error('Erro ao salvar frete:', err)
            setShippingError('Erro ao salvar configurações de frete')
        } finally {
            setShippingLoading(false)
        }
    }

    const shippingSummary = useMemo(() => {
        if (!shippingMethods.length) {
            return 'Nenhuma configuração ativa.'
        }
        const actives = shippingMethods.filter((method) => method.active)
        if (!actives.length) {
            return 'Configurações cadastradas, mas sem métodos ativos.'
        }
        return `${actives.length} método(s) ativo(s)`
    }, [shippingMethods])

    return (
        <Shell>
            <div className="max-w-2xl mx-auto space-y-6">
                <div className="flex items-center justify-between">
                    <h1 className="text-xl font-semibold text-medicalBlue">Minha Empresa</h1>
                    {company && !editing && activeTab === 'overview' && (
                        <button
                            onClick={() => setEditing(true)}
                            className="rounded bg-medicalBlue px-4 py-2 text-sm font-semibold text-white"
                        >
                            Editar
                        </button>
                    )}
                </div>

                <div className="flex gap-2 border-b border-gray-200">
                    {tabs.map((tab) => (
                        <button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={`px-4 py-2 text-sm font-semibold ${activeTab === tab.id
                                ? 'border-b-2 border-medicalBlue text-medicalBlue'
                                : 'text-gray-500 hover:text-medicalBlue'
                                }`}
                        >
                            {tab.label}
                        </button>
                    ))}
                </div>

                {loading && (
                    <div className="flex justify-center py-8">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-medicalBlue"></div>
                    </div>
                )}

                {error && (
                    <div className="rounded bg-red-100 p-4 text-red-700">{error}</div>
                )}

                {company && activeTab === 'overview' && !editing && (
                    <div className="rounded-lg bg-white p-6 shadow-sm space-y-4">
                        <div className="flex items-center justify-between">
                            <span className="text-sm text-gray-500">Status</span>
                            {company.is_verified ? (
                                <span className="rounded bg-green-100 px-3 py-1 text-sm font-semibold text-green-800">
                                    ✓ Verificada
                                </span>
                            ) : (
                                <span className="rounded bg-yellow-100 px-3 py-1 text-sm font-semibold text-yellow-800">
                                    Pendente verificação
                                </span>
                            )}
                        </div>
                        <div className="grid gap-4 border-t pt-4 sm:grid-cols-2">
                            <div>
                                <p className="text-sm text-gray-500">Razão Social</p>
                                <p className="font-semibold text-gray-800">{company.corporate_name}</p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">CNPJ</p>
                                <p className="font-semibold text-gray-800">{company.cnpj}</p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Categoria</p>
                                <p className="font-semibold text-gray-800">
                                    {categoryLabels[company.category] || company.category}
                                </p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Licença Sanitária</p>
                                <p className="font-semibold text-gray-800">{company.license_number}</p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Localização</p>
                                <p className="font-semibold text-gray-800">
                                    {company.city}/{company.state}
                                </p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Coordenadas</p>
                                <p className="font-semibold text-gray-800">
                                    {company.latitude.toFixed(4)}, {company.longitude.toFixed(4)}
                                </p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Cadastro</p>
                                <p className="font-semibold text-gray-800">
                                    {formatDate(company.created_at)}
                                </p>
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">Atualização</p>
                                <p className="font-semibold text-gray-800">
                                    {formatDate(company.updated_at)}
                                </p>
                            </div>
                        </div>
                        <div className="border-t pt-4">
                            <div className="flex items-center justify-between">
                                <div>
                                    <p className="text-sm text-gray-500">Avaliação</p>
                                    <p className="font-semibold text-gray-800">
                                        {rating ? rating.average_score.toFixed(1) : 'Sem avaliação'}
                                    </p>
                                </div>
                                <div className="text-right">
                                    <p className="text-sm text-gray-500">Total de reviews</p>
                                    <p className="font-semibold text-gray-800">
                                        {rating ? rating.total_reviews : 0}
                                    </p>
                                </div>
                            </div>
                            {ratingError && (
                                <p className="mt-2 text-sm text-yellow-700">{ratingError}</p>
                            )}
                        </div>
                    </div>
                )}

                {company && activeTab === 'overview' && editing && (
                    <div className="rounded-lg bg-white p-6 shadow-sm space-y-4">
                        <div className="grid gap-4 sm:grid-cols-2">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                    Razão Social
                                </label>
                                <input
                                    type="text"
                                    value={form.corporate_name}
                                    onChange={(e) => setForm({ ...form, corporate_name: e.target.value })}
                                    className="w-full rounded border border-gray-200 px-3 py-2"
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                    Licença Sanitária
                                </label>
                                <input
                                    type="text"
                                    value={form.license_number}
                                    onChange={(e) => setForm({ ...form, license_number: e.target.value })}
                                    className="w-full rounded border border-gray-200 px-3 py-2"
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">
                                    Telefone
                                </label>
                                <input
                                    type="tel"
                                    value={form.phone}
                                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
                                    className="w-full rounded border border-gray-200 px-3 py-2"
                                    placeholder="(00) 00000-0000"
                                />
                            </div>
                            <div className="grid grid-cols-2 gap-2">
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">
                                        Cidade
                                    </label>
                                    <input
                                        type="text"
                                        value={form.city}
                                        onChange={(e) => setForm({ ...form, city: e.target.value })}
                                        className="w-full rounded border border-gray-200 px-3 py-2"
                                    />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">
                                        Estado
                                    </label>
                                    <input
                                        type="text"
                                        value={form.state}
                                        onChange={(e) => setForm({ ...form, state: e.target.value })}
                                        className="w-full rounded border border-gray-200 px-3 py-2"
                                        maxLength={2}
                                        placeholder="GO"
                                    />
                                </div>
                            </div>
                        </div>

                        <div className="border-t pt-4">
                            <h3 className="text-sm font-semibold text-gray-700 mb-3">Horário de Funcionamento</h3>
                            <div className="space-y-3">
                                <label className="flex items-center gap-2">
                                    <input
                                        type="checkbox"
                                        checked={form.is_24_hours}
                                        onChange={(e) => setForm({ ...form, is_24_hours: e.target.checked })}
                                        className="rounded border-gray-300"
                                    />
                                    <span className="text-sm text-gray-700">Funciona 24 horas</span>
                                </label>
                                {!form.is_24_hours && (
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">
                                            Horários
                                        </label>
                                        <textarea
                                            value={form.operating_hours}
                                            onChange={(e) => setForm({ ...form, operating_hours: e.target.value })}
                                            className="w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                            rows={3}
                                            placeholder="Seg-Sex: 08:00 - 18:00&#10;Sáb: 08:00 - 12:00&#10;Dom: Fechado"
                                        />
                                    </div>
                                )}
                            </div>
                        </div>

                        <div className="flex gap-3 pt-2">
                            <button
                                onClick={saveChanges}
                                className="rounded bg-healthGreen px-4 py-2 text-sm font-semibold text-white"
                            >
                                Salvar
                            </button>
                            <button
                                onClick={() => setEditing(false)}
                                className="rounded bg-gray-200 px-4 py-2 text-sm font-semibold text-gray-700"
                            >
                                Cancelar
                            </button>
                        </div>
                    </div>
                )}

                {activeTab === 'users' && (
                    <div className="rounded-lg bg-white p-6 shadow-sm space-y-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <h2 className="text-lg font-semibold text-gray-900">Usuários da empresa</h2>
                                <p className="text-sm text-gray-500">
                                    {usersMeta.total} usuário(s) vinculados.
                                </p>
                            </div>
                            <button
                                onClick={() => company && loadUsers(company.id)}
                                className="rounded border border-gray-200 px-3 py-1 text-sm text-gray-600 hover:border-medicalBlue hover:text-medicalBlue"
                            >
                                Atualizar
                            </button>
                        </div>
                        {usersLoading ? (
                            <div className="py-6 text-center text-gray-500">Carregando usuários...</div>
                        ) : usersError ? (
                            <div className="rounded bg-red-100 p-4 text-red-700">{usersError}</div>
                        ) : users.length === 0 ? (
                            <div className="py-6 text-center text-gray-500">
                                Nenhum usuário associado a esta empresa.
                            </div>
                        ) : (
                            <div className="overflow-hidden rounded-lg border border-gray-200">
                                <table className="min-w-full divide-y divide-gray-200">
                                    <thead className="bg-gray-50">
                                        <tr>
                                            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500">Nome</th>
                                            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500">Email</th>
                                            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500">Perfil</th>
                                            <th className="px-4 py-2 text-left text-xs font-semibold text-gray-500">Status</th>
                                            <th className="px-4 py-2 text-right text-xs font-semibold text-gray-500">Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y divide-gray-200 bg-white">
                                        {users.map((user) => (
                                            <tr key={user.id}>
                                                <td className="px-4 py-3 text-sm text-gray-900">
                                                    <div className="font-medium">{user.name}</div>
                                                    <div className="text-xs text-gray-500">@{user.username}</div>
                                                </td>
                                                <td className="px-4 py-3 text-sm text-gray-700">{user.email}</td>
                                                <td className="px-4 py-3 text-sm text-gray-700">{user.role}</td>
                                                <td className="px-4 py-3 text-sm">
                                                    <span
                                                        className={`rounded-full px-2 py-1 text-xs font-semibold ${user.email_verified
                                                            ? 'bg-green-100 text-green-800'
                                                            : 'bg-yellow-100 text-yellow-800'
                                                            }`}
                                                    >
                                                        {user.email_verified ? 'Verificado' : 'Pendente'}
                                                    </span>
                                                </td>
                                                <td className="px-4 py-3 text-sm text-right">
                                                    <button
                                                        onClick={() => {
                                                            setEditingUser(user)
                                                            setUserForm({ name: user.name, email: user.email, role: user.role })
                                                        }}
                                                        className="text-medicalBlue hover:underline text-xs font-medium mr-2"
                                                    >
                                                        Editar
                                                    </button>
                                                    <button
                                                        onClick={() => handleDeleteUser(user.id)}
                                                        className="text-red-600 hover:underline text-xs font-medium"
                                                    >
                                                        Excluir
                                                    </button>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </div>
                )}

                {activeTab === 'shipping' && (
                    <div className="rounded-lg bg-white p-6 shadow-sm space-y-5">
                        <div className="flex items-center justify-between">
                            <div>
                                <h2 className="text-lg font-semibold text-gray-900">Configuração de frete</h2>
                                <p className="text-sm text-gray-500">{shippingSummary}</p>
                            </div>
                            <div className="flex gap-2">
                                {!shippingEditing && (
                                    <button
                                        onClick={() => setShippingEditing(true)}
                                        className="rounded bg-medicalBlue px-4 py-2 text-sm font-semibold text-white"
                                    >
                                        Editar frete
                                    </button>
                                )}
                                {shippingEditing && (
                                    <>
                                        <button
                                            onClick={saveShippingSettings}
                                            className="rounded bg-healthGreen px-4 py-2 text-sm font-semibold text-white"
                                        >
                                            Salvar
                                        </button>
                                        <button
                                            onClick={() => {
                                                setShippingEditing(false)
                                                setShippingDraft(mergeShippingDrafts(shippingMethods))
                                            }}
                                            className="rounded bg-gray-200 px-4 py-2 text-sm font-semibold text-gray-700"
                                        >
                                            Cancelar
                                        </button>
                                    </>
                                )}
                            </div>
                        </div>

                        {shippingLoading && (
                            <div className="py-6 text-center text-gray-500">Carregando frete...</div>
                        )}

                        {shippingError && (
                            <div className="rounded bg-red-100 p-4 text-red-700">{shippingError}</div>
                        )}

                        <div className="space-y-4">
                            {(shippingEditing ? shippingDraft : mergeShippingDrafts(shippingMethods)).map((method, index) => (
                                <div key={method.type} className="rounded-lg border border-gray-200 p-4 space-y-4">
                                    <div className="flex items-center justify-between">
                                        <h3 className="text-md font-semibold text-gray-900">
                                            {shippingLabels[method.type]}
                                        </h3>
                                        {shippingEditing ? (
                                            <label className="flex items-center gap-2 text-sm text-gray-700">
                                                <input
                                                    type="checkbox"
                                                    checked={method.active}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = { ...method, active: e.target.checked }
                                                        setShippingDraft(updated)
                                                    }}
                                                />
                                                Ativo
                                            </label>
                                        ) : (
                                            <span
                                                className={`rounded-full px-2 py-1 text-xs font-semibold ${method.active
                                                    ? 'bg-green-100 text-green-800'
                                                    : 'bg-gray-100 text-gray-600'
                                                    }`}
                                            >
                                                {method.active ? 'Ativo' : 'Inativo'}
                                            </span>
                                        )}
                                    </div>

                                    <div className="grid gap-4 md:grid-cols-2">
                                        <div>
                                            <p className="text-xs text-gray-500">Tempo de preparo (min)</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="number"
                                                    value={method.preparation_minutes}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            preparation_minutes: Number(e.target.value)
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">{method.preparation_minutes} min</p>
                                            )}
                                        </div>
                                        <div>
                                            <p className="text-xs text-gray-500">Raio máximo (km)</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="number"
                                                    value={method.max_radius_km}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            max_radius_km: Number(e.target.value)
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">{method.max_radius_km} km</p>
                                            )}
                                        </div>
                                        <div>
                                            <p className="text-xs text-gray-500">Taxa mínima (R$)</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="text"
                                                    value={method.min_fee_reais}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            min_fee_reais: e.target.value
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">
                                                    {formatCurrency(parseNumber(method.min_fee_reais))}
                                                </p>
                                            )}
                                        </div>
                                        <div>
                                            <p className="text-xs text-gray-500">Preço por km (R$)</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="text"
                                                    value={method.price_per_km_reais}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            price_per_km_reais: e.target.value
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">
                                                    {formatCurrency(parseNumber(method.price_per_km_reais))}
                                                </p>
                                            )}
                                        </div>
                                        <div>
                                            <p className="text-xs text-gray-500">Frete grátis acima de (R$)</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="text"
                                                    value={method.free_shipping_threshold_reais}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            free_shipping_threshold_reais: e.target.value
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                    placeholder="Deixe em branco se não aplica"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">
                                                    {method.free_shipping_threshold_reais
                                                        ? formatCurrency(parseNumber(method.free_shipping_threshold_reais))
                                                        : 'Não aplica'}
                                                </p>
                                            )}
                                        </div>
                                        <div>
                                            <p className="text-xs text-gray-500">Endereço de retirada</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="text"
                                                    value={method.pickup_address}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            pickup_address: e.target.value
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                    placeholder="Informe o endereço para retirada"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">
                                                    {method.pickup_address || 'Não informado'}
                                                </p>
                                            )}
                                        </div>
                                        <div className="md:col-span-2">
                                            <p className="text-xs text-gray-500">Horário de retirada</p>
                                            {shippingEditing ? (
                                                <input
                                                    type="text"
                                                    value={method.pickup_hours}
                                                    onChange={(e) => {
                                                        const updated = [...shippingDraft]
                                                        updated[index] = {
                                                            ...method,
                                                            pickup_hours: e.target.value
                                                        }
                                                        setShippingDraft(updated)
                                                    }}
                                                    className="mt-1 w-full rounded border border-gray-200 px-3 py-2 text-sm"
                                                    placeholder="Ex: Seg-Sex 08:00 - 18:00"
                                                />
                                            ) : (
                                                <p className="font-semibold text-gray-800">
                                                    {method.pickup_hours || 'Não informado'}
                                                </p>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}
            </div>

            {/* User Edit Modal */}
            {editingUser && (
                <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={() => setEditingUser(null)}>
                    <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 space-y-4" onClick={(e) => e.stopPropagation()}>
                        <div className="flex items-center justify-between">
                            <h2 className="text-lg font-semibold text-gray-900">Editar Usuário</h2>
                            <button onClick={() => setEditingUser(null)} className="text-gray-400 hover:text-gray-600">
                                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                        <div className="space-y-3">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Nome</label>
                                <input
                                    type="text"
                                    value={userForm.name}
                                    onChange={(e) => setUserForm({ ...userForm, name: e.target.value })}
                                    className="w-full rounded border border-gray-200 px-3 py-2"
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input
                                    type="email"
                                    value={userForm.email}
                                    onChange={(e) => setUserForm({ ...userForm, email: e.target.value })}
                                    className="w-full rounded border border-gray-200 px-3 py-2"
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Perfil</label>
                                <select
                                    value={userForm.role}
                                    onChange={(e) => setUserForm({ ...userForm, role: e.target.value })}
                                    className="w-full rounded border border-gray-200 px-3 py-2"
                                >
                                    <option value="Dono">Dono</option>
                                    <option value="Colaborador">Colaborador</option>
                                    <option value="Entregador">Entregador</option>
                                    <option value="Admin">Admin</option>
                                </select>
                            </div>
                        </div>
                        <div className="flex gap-3 pt-2">
                            <button
                                onClick={handleSaveUser}
                                className="rounded bg-healthGreen px-4 py-2 text-sm font-semibold text-white"
                            >
                                Salvar
                            </button>
                            <button
                                onClick={() => setEditingUser(null)}
                                className="rounded bg-gray-200 px-4 py-2 text-sm font-semibold text-gray-700"
                            >
                                Cancelar
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </Shell>
    )
}
