import React, { useEffect, useState } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { useObjectMetadata, useObjectAuthoringMetadata } from '../infrastructure/api/objectMetadataHooks';
import { metadataAPI } from '../infrastructure/api/metadata';
import { useSuccessToast, useErrorToast } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { Settings, Layout, Shield, Database } from 'lucide-react';
import { Logger } from '../core/services/Logger';
// generateUUID removed — single layout model, no New Layout dialog
import type { SObjectField } from '../types';
import { ValidationRulesList } from './ValidationRulesList';
import { FieldDefinitionModal } from '../features/studio/components/FieldDefinitionModal';
import { Skeleton } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { ConfirmationModal } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { AccessDeniedEmptyState } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { getObjectPagePermissionErrorCopy } from '../features/objects/objectPagePermissionErrors';

// Sub-components
import { ObjectHeader } from './object-detail/ObjectHeader';
import { ObjectFieldsTab } from './object-detail/ObjectFieldsTab';
import { ObjectDetailsTab } from './object-detail/ObjectDetailsTab';
import { tryBuildSetupCapabilityChildPath } from '../core/navigation/setupPagePaths';
import { useApp } from '@nexuscrm/host-sdk';

type Tab = 'fields' | 'details' | 'layouts' | 'validation';

export const ObjectDetail: React.FC = () => {
    const { objectApiName } = useParams<{ objectApiName: string }>();
    const { metadata, loading, error, refresh } = useObjectMetadata(objectApiName || '');
    // Describe carries no object description; the authoring API owns it.
    const {
        authoringMetadata,
        loaded: authoringLoaded,
        loading: authoringLoading,
        refresh: refreshAuthoring,
    } = useObjectAuthoringMetadata(objectApiName || '');
    const navigate = useNavigate();
    const { currentFrontendAppId } = useApp();
    const [searchParams] = useSearchParams();
    const showSuccess = useSuccessToast();
    const showError = useErrorToast();

    const requestedTab = searchParams.get('tab');
    const initialTab: Tab = requestedTab === 'details' || requestedTab === 'layouts' || requestedTab === 'validation'
        ? requestedTab
        : 'fields';
    const [activeTab, setActiveTab] = useState<Tab>(initialTab);

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editingField, setEditingField] = useState<SObjectField | null>(null);

    // Edit Object State
    const [isEditObjectModalOpen, setIsEditObjectModalOpen] = useState(false);
    const [editObjectData, setEditObjectData] = useState({
        label: '',
        labelPlural: ''
    });
    // null = the description was never read back, so we must not write one.
    // The tooling endpoint treats a present empty string as "clear it", which is
    // how blank prefills used to erase object descriptions outright.
    const [editObjectDescription, setEditObjectDescription] = useState<string | null>(null);
    const [savingObject, setSavingObject] = useState(false);

    // Describe gates the Edit Object button and is the faster of the two reads,
    // so the modal can be open before the authoring read lands. Seed it when
    // that happens instead of leaving the field stuck disabled until the user
    // closes and reopens. The `!== null` guard makes this fire at most once per
    // open, so it can never overwrite something already typed.
    useEffect(() => {
        if (!isEditObjectModalOpen || !authoringLoaded) return;
        setEditObjectDescription(current => (current === null ? authoringMetadata?.description ?? '' : current));
    }, [isEditObjectModalOpen, authoringLoaded, authoringMetadata]);

    // Field delete confirmation state
    const [deleteFieldModalOpen, setDeleteFieldModalOpen] = useState(false);
    const [fieldToDelete, setFieldToDelete] = useState<string | null>(null);
    const [deletingField, setDeletingField] = useState(false);

    if (!objectApiName) return <div className="p-8 text-center text-red-500">Error: Object API Name is missing</div>;

    if (loading) {
        return (
            <div className="max-w-7xl mx-auto p-6">
                <div className="mb-6">
                    <div className="flex items-center gap-2 mb-4">
                        <Skeleton variant="text" width={100} height={20} />
                    </div>
                    <div className="flex items-center justify-between mb-6">
                        <div className="flex items-center gap-4">
                            <Skeleton variant="rectangular" width={56} height={56} className="rounded-lg" />
                            <div>
                                <Skeleton variant="text" width={200} height={32} className="mb-2" />
                                <Skeleton variant="text" width={150} height={20} />
                            </div>
                        </div>
                    </div>
                    <div className="border-b border-slate-200 mb-6">
                        <div className="flex space-x-8">
                            <Skeleton variant="text" width={100} height={40} />
                            <Skeleton variant="text" width={100} height={40} />
                            <Skeleton variant="text" width={100} height={40} />
                            <Skeleton variant="text" width={100} height={40} />
                        </div>
                    </div>
                    <div className="space-y-4">
                        <Skeleton variant="rectangular" height={400} />
                    </div>
                </div>
            </div>
        );
    }
    if (error) {
        const permissionCopy = getObjectPagePermissionErrorCopy(error);
        if (permissionCopy) {
            return (
                <AccessDeniedEmptyState
                    title={permissionCopy.title}
                    description={permissionCopy.description}
                    onGoBack={() => navigate(-1)}
                />
            );
        }
        return <div className="p-8 text-center text-red-500">Error: {error.message}</div>;
    }
    if (!metadata) return <div className="p-8 text-center">Object not found</div>;

    const handleOpenCreate = () => {
        setEditingField(null);
        setIsModalOpen(true);
    };

    const handleOpenEdit = (field: SObjectField) => {
        setEditingField(field);
        setIsModalOpen(true);
    };

    const handleDelete = (fieldApiName: string) => {
        setFieldToDelete(fieldApiName);
        setDeleteFieldModalOpen(true);
    };

    const confirmDeleteField = async () => {
        if (!fieldToDelete) return;
        setDeletingField(true);
        try {
            await metadataAPI.deleteField(objectApiName, fieldToDelete);
            refresh();
            setDeleteFieldModalOpen(false);
            setFieldToDelete(null);
        } catch (err: unknown) {
            Logger.error('[ObjectDetail] Failed to delete field', {}, err);
            showError('Failed to delete field. Please check console for details.');
        } finally {
            setDeletingField(false);
        }
    };

    const handleOpenEditObject = () => {
        setEditObjectData({
            label: metadata.label,
            labelPlural: metadata.labelPlural
        });
        setEditObjectDescription(authoringLoaded ? authoringMetadata?.description ?? '' : null);
        setIsEditObjectModalOpen(true);
    };

    const handleSaveObject = async (e: React.FormEvent) => {
        e.preventDefault();
        setSavingObject(true);
        try {
            await metadataAPI.updateSchema(objectApiName, {
                label: editObjectData.label,
                labelPlural: editObjectData.labelPlural,
                // Omitted when unread — a missing key leaves the stored
                // description untouched, an empty string overwrites it.
                ...(editObjectDescription !== null && { description: editObjectDescription })
            });
            await Promise.all([refresh(), refreshAuthoring()]);
            setIsEditObjectModalOpen(false);
            showSuccess('Object properties verified successfully.');
        } catch (err: unknown) {
            Logger.error('[ObjectDetail] Failed to update object', {}, err);
            showError('Failed to update object properties.');
        } finally {
            setSavingObject(false);
        }
    };

    return (
        <div className="max-w-7xl mx-auto p-6">
            <ObjectHeader
                metadata={metadata}
                onEditObject={handleOpenEditObject}
            />

            {/* Tabs */}
            <div className="border-b border-slate-200 mb-6">
                <nav className="-mb-px flex space-x-8">
                    <button
                        onClick={() => setActiveTab('fields')}
                        className={`
                                pb-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2
                                ${activeTab === 'fields'
                                ? 'border-blue-500 text-blue-600'
                                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'}
                            `}
                    >
                        <Settings size={16} />
                        Fields & Relationships
                    </button>
                    <button
                        onClick={() => setActiveTab('layouts')}
                        className={`
                                pb-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2
                                ${activeTab === 'layouts'
                                ? 'border-blue-500 text-blue-600'
                                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'}
                            `}
                    >
                        <Layout size={16} />
                        Page Layouts
                    </button>
                    <button
                        onClick={() => setActiveTab('validation')}
                        className={`
                                pb-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2
                                ${activeTab === 'validation'
                                ? 'border-blue-500 text-blue-600'
                                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'}
                            `}
                    >
                        <Shield size={16} />
                        Validation Rules
                    </button>
                    <button
                        onClick={() => setActiveTab('details')}
                        className={`
                                pb-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2
                                ${activeTab === 'details'
                                ? 'border-blue-500 text-blue-600'
                                : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'}
                            `}
                    >
                        <Database size={16} />
                        Details
                    </button>
                </nav>
            </div>

            {/* Tab Content */}
            {activeTab === 'fields' && (
                <ObjectFieldsTab
                    metadata={metadata}
                    onOpenCreate={handleOpenCreate}
                    onOpenEdit={handleOpenEdit}
                    onDelete={handleDelete}
                />
            )}

            {activeTab === 'validation' && (
                <ValidationRulesList objectApiName={objectApiName} />
            )}

            {activeTab === 'details' && (
                <ObjectDetailsTab
                    metadata={metadata}
                    description={authoringMetadata?.description}
                    descriptionStatus={
                        authoringLoaded ? 'loaded' : authoringLoading ? 'loading' : 'unavailable'
                    }
                    refresh={async () => { await Promise.all([refresh(), refreshAuthoring()]); }}
                />
            )}

            {activeTab === 'layouts' && (
                <div className="bg-white rounded-lg shadow border border-slate-200 p-8 text-center">
                    <Layout className="mx-auto h-12 w-12 text-slate-400 mb-4" />
                    <h3 className="text-lg font-medium text-slate-900">Page Layouts</h3>
                    <p className="text-sm text-slate-500 mt-1 mb-4">Manage layouts and assignment rules for this object.</p>
                    <button
                        onClick={() => navigate(tryBuildSetupCapabilityChildPath(currentFrontendAppId, 'objectManager', `${objectApiName}/layout`) ?? '/')}
                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium inline-flex items-center gap-2 text-sm"
                    >
                        <Layout size={16} />
                        Manage Page Layouts
                    </button>
                </div>
            )}

            {/* Field Modal */}
            <FieldDefinitionModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                objectApiName={objectApiName}
                onSave={refresh}
                editingField={editingField}
            />

            {/* Edit Object Modal */}
            {
                isEditObjectModalOpen && (
                    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] p-4">
                        <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg">
                            <div className="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50 rounded-t-xl">
                                <h2 className="text-xl font-bold text-slate-800">Edit Object</h2>
                                <button onClick={() => setIsEditObjectModalOpen(false)} className="text-slate-400 hover:text-slate-600">
                                    <div className="sr-only">Close</div>
                                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <form onSubmit={handleSaveObject} className="p-6 space-y-6">
                                <div className="grid grid-cols-2 gap-4">
                                    <div>
                                        <label className="block text-sm font-medium text-slate-700 mb-1">
                                            Label <span className="text-red-600">*</span>
                                        </label>
                                        <input
                                            type="text"
                                            required
                                            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            value={editObjectData.label}
                                            onChange={e => setEditObjectData({ ...editObjectData, label: e.target.value })}
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-slate-700 mb-1">
                                            Plural Label <span className="text-red-600">*</span>
                                        </label>
                                        <input
                                            type="text"
                                            required
                                            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                            value={editObjectData.labelPlural}
                                            onChange={e => setEditObjectData({ ...editObjectData, labelPlural: e.target.value })}
                                        />
                                    </div>
                                </div>

                                <div>
                                    <label className="block text-sm font-medium text-slate-700 mb-1">Description</label>
                                    <textarea
                                        className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-slate-50 disabled:text-slate-400"
                                        rows={3}
                                        value={editObjectDescription ?? ''}
                                        disabled={editObjectDescription === null}
                                        onChange={e => setEditObjectDescription(e.target.value)}
                                    />
                                    {editObjectDescription === null && (
                                        <p className="mt-1 text-sm text-amber-700">
                                            {authoringLoading
                                                ? 'The current description is still loading. Saving now leaves it unchanged.'
                                                : 'The current description could not be loaded, so it cannot be edited here. Saving leaves it unchanged.'}
                                        </p>
                                    )}
                                </div>

                                <div className="flex justify-end gap-3 pt-4 border-t border-slate-200">
                                    <button
                                        type="button"
                                        onClick={() => setIsEditObjectModalOpen(false)}
                                        className="px-4 py-2 text-slate-700 border border-slate-300 rounded-lg hover:bg-slate-50 font-medium"
                                    >
                                        Cancel
                                    </button>
                                    <button
                                        type="submit"
                                        disabled={savingObject}
                                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium disabled:opacity-50 flex items-center gap-2"
                                    >
                                        {savingObject ? 'Saving...' : 'Save Changes'}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                )
            }

            {/* Delete Field Confirmation Modal */}
            <ConfirmationModal
                isOpen={deleteFieldModalOpen}
                onClose={() => {
                    setDeleteFieldModalOpen(false);
                    setFieldToDelete(null);
                }}
                onConfirm={confirmDeleteField}
                title="Delete Field"
                message={`Are you sure you want to delete the field "${fieldToDelete}"? This action cannot be undone.`}
                confirmLabel="Delete"
                cancelLabel="Cancel"
                variant="danger"
                loading={deletingField}
            />

            {/* New Layout Modal */}
            {/* New Layout and Delete Layout modals removed — single layout model */}
        </div>
    );
};