import React from 'react';
import { SObjectDescribe } from '../../types';
import { metadataAPI } from '../../infrastructure/api/metadata';
import { Logger } from '../../core/services/Logger';
import { SearchableSelect } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';

interface ObjectDetailsTabProps {
    metadata: SObjectDescribe;
    /**
     * From the metadata (authoring) API, not from `metadata` — describe has no
     * object description. Undefined means the object has none; "the request has
     * not resolved" is carried by `descriptionStatus` instead, so a failed load
     * can never be rendered as "this object has no description".
     */
    description?: string;
    descriptionStatus: 'loading' | 'loaded' | 'unavailable';
    refresh: () => Promise<void>;
}

export const ObjectDetailsTab: React.FC<ObjectDetailsTabProps> = ({
    metadata,
    description,
    descriptionStatus,
}) => {
    return (
        <div className="space-y-6">
            <div className="bg-white/80 backdrop-blur-xl border border-white/20 rounded-2xl shadow-xl p-6">
                <h3 className="text-lg font-medium text-slate-900 mb-4">Object Details</h3>
                <dl className="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div>
                        <dt className="text-sm font-medium text-slate-500">Label</dt>
                        <dd className="mt-1 text-sm text-slate-900">{metadata.label}</dd>
                    </div>
                    <div>
                        <dt className="text-sm font-medium text-slate-500">Plural Label</dt>
                        <dd className="mt-1 text-sm text-slate-900">{metadata.labelPlural}</dd>
                    </div>
                    <div>
                        <dt className="text-sm font-medium text-slate-500">API Name</dt>
                        <dd className="mt-1 text-sm text-slate-900 font-mono">{metadata.name}</dd>
                    </div>
                    <div>
                        <dt className="text-sm font-medium text-slate-500">Type</dt>
                        <dd className="mt-1 text-sm text-slate-900">{metadata.custom ? 'Custom' : 'Standard'}</dd>
                    </div>
                    <div className="sm:col-span-2">
                        <dt className="text-sm font-medium text-slate-500">Description</dt>
                        <dd className="mt-1 text-sm text-slate-900 whitespace-pre-wrap">
                            {descriptionStatus === 'loading' && (
                                <span className="text-slate-400">Loading…</span>
                            )}
                            {descriptionStatus === 'unavailable' && (
                                <span className="text-amber-700">Could not load the description.</span>
                            )}
                            {descriptionStatus === 'loaded' && (description?.trim() || '-')}
                        </dd>
                    </div>
                </dl>
            </div>

            <div className="bg-white/80 backdrop-blur-xl border border-white/20 rounded-2xl shadow-xl p-6">
                <h3 className="text-lg font-medium text-slate-900 mb-4">Path Settings</h3>
                <div className="max-w-xl">
                    <label className="block text-sm font-medium text-slate-700 mb-1">
                        Path Field
                    </label>
                    <p className="text-sm text-slate-500 mb-3">
                        Select a picklist field to use for the Path component (visual progress bar).
                    </p>
                    <div className="flex gap-2">
                        <SearchableSelect
                            options={(metadata.fields || [])
                                .filter(f => f.type === 'picklist')
                                .map(f => ({ value: f.name, label: f.label || f.name, detail: f.name }))}
                            value={metadata.pathField || ''}
                            onChange={async (path_field) => {
                                try {
                                    await metadataAPI.updateSchema(metadata.name, { pathField: path_field });
                                    window.location.reload();
                                } catch (err: unknown) {
                                    Logger.error('[ObjectDetailsTab] Failed to update path field', {}, err);
                                }
                            }}
                            placeholder="-- None --"
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};