import React, { useState } from 'react';
import Form from '@rjsf/antd';
import { IChangeEvent } from '@rjsf/core';
import { RJSFSchema, UiSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
import {
  Card,
  Collapse,
  Badge,
  Tag,
  Space,
  Switch,
  Typography,
  Alert,
} from 'antd';
import {
  Rule,
  UiEffect,
  SchemaEffect,
  ValidationEffect,
} from '../src/conditionals/v2/types';
import {
  useConditionalUi,
  useConditionalSchema,
  useConditionalValidation,
} from '../src/conditionals/v2';
import { useFormDevTools } from '../src/hooks/useFormDevTools';

const { Panel } = Collapse;
const { Text } = Typography;

// Base schema
const baseSchema: RJSFSchema = {
  type: 'object',
  title: 'Form with DevTools Example',
  properties: {
    country: {
      type: 'string',
      title: 'Country',
      enum: ['USA', 'Canada', 'UK', 'Other'],
    },
    requiresShipping: {
      type: 'boolean',
      title: 'Requires Shipping?',
    },
    shippingAddress: {
      type: 'object',
      title: 'Shipping Address',
      properties: {
        street: { type: 'string', title: 'Street' },
        city: { type: 'string', title: 'City' },
        state: { type: 'string', title: 'State' },
        zip: { type: 'string', title: 'ZIP Code' },
      },
    },
    maritalStatus: {
      type: 'string',
      title: 'Marital Status',
      enum: ['single', 'married', 'divorced', 'widowed'],
    },
    spouseName: {
      type: 'string',
      title: 'Spouse Name',
    },
  },
};

// Base UI schema
const baseUiSchema: UiSchema = {
  'ui:order': [
    'country',
    'requiresShipping',
    'shippingAddress',
    'maritalStatus',
    'spouseName',
  ],
};

// UI Rules
const uiRules: Rule<UiEffect>[] = [
  {
    name: 'Hide shipping address when not required',
    condition: formData => !formData.requiresShipping,
    effect: [
      { op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' },
    ],
  },
  {
    name: 'Show state dropdown for US/Canada',
    condition: formData =>
      formData.country === 'USA' || formData.country === 'Canada',
    effect: [
      {
        op: 'add',
        path: '/shippingAddress/state/ui:widget',
        value: 'select',
      },
    ],
  },
];

// Schema Rules
const schemaRules: Rule<SchemaEffect>[] = [
  {
    name: 'Add spouse fields when married',
    condition: formData => formData.maritalStatus === 'married',
    effect: [{ op: 'add', path: '/required/-', value: 'spouseName' }],
  },
  {
    name: 'Remove spouse field when not married',
    condition: formData => formData.maritalStatus !== 'married',
    effect: [{ op: 'remove', path: '/properties/spouseName' }],
  },
];

// Validation Rules
const validationRules: Rule<ValidationEffect>[] = [
  {
    name: 'US ZIP code format validation',
    effect: {
      name: 'US ZIP code format',
      isActive: formData =>
        formData.country === 'USA' && formData.requiresShipping,
      validate: (errors, formData) => {
        if (
          formData.shippingAddress?.zip &&
          !/^\d{5}(-\d{4})?$/.test(formData.shippingAddress.zip)
        ) {
          if (!errors.shippingAddress) errors.shippingAddress = {};
          if (!errors.shippingAddress.zip) errors.shippingAddress.zip = {};
          errors.shippingAddress.zip.__errors = [
            'ZIP code must be XXXXX or XXXXX-XXXX format',
          ];
        }
      },
    },
  },
  {
    name: 'Canadian postal code validation',
    effect: {
      name: 'Canadian postal code',
      isActive: formData =>
        formData.country === 'Canada' && formData.requiresShipping,
      validate: (errors, formData) => {
        if (
          formData.shippingAddress?.zip &&
          !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(formData.shippingAddress.zip)
        ) {
          if (!errors.shippingAddress) errors.shippingAddress = {};
          if (!errors.shippingAddress.zip) errors.shippingAddress.zip = {};
          errors.shippingAddress.zip.__errors = [
            'Postal code must be A1A 1A1 format',
          ];
        }
      },
    },
  },
];

// DevTools Panel Component
const DevToolsPanel: React.FC<{
  devTools: ReturnType<typeof useFormDevTools>;
}> = ({ devTools }) => {
  const { evaluations, activeRules, hasErrors, errors, summary } = devTools;

  return (
    <Card title='Form DevTools' style={{ marginTop: 24 }}>
      <Space direction='vertical' style={{ width: '100%' }}>
        {/* Summary */}
        <Alert
          message={
            <Space>
              <Text>Total Rules: {summary.totalRules}</Text>
              <Badge
                count={summary.activeCount}
                style={{ backgroundColor: '#52c41a' }}
              />
              <Text>Active</Text>
              {hasErrors && (
                <>
                  <Badge count={summary.errorCount} />
                  <Text>Errors</Text>
                </>
              )}
            </Space>
          }
          type={hasErrors ? 'warning' : 'info'}
        />

        {/* Errors */}
        {hasErrors && (
          <Alert
            message='Rule Evaluation Errors'
            description={
              <ul>
                {errors.map((error, idx) => (
                  <li key={idx}>
                    <Text type='danger'>
                      {error.pillar} Rule "{error.ruleName}": {error.error}
                    </Text>
                  </li>
                ))}
              </ul>
            }
            type='error'
          />
        )}

        {/* Rule Details */}
        <Collapse defaultActiveKey={['ui']}>
          <Panel
            header={`UI Rules (${activeRules.ui.length} active)`}
            key='ui'
            extra={
              <Badge
                count={activeRules.ui.length}
                style={{ backgroundColor: '#52c41a' }}
              />
            }
          >
            {evaluations
              .filter(e => e.pillar === 'UI')
              .map((evaluation, idx) => (
                <div key={idx} style={{ marginBottom: 8 }}>
                  <Tag color={evaluation.active ? 'green' : 'default'}>
                    {evaluation.active ? '✓' : '○'}
                  </Tag>
                  <Text>{evaluation.ruleName}</Text>
                  {evaluation.error && (
                    <Text type='danger'> (Error: {evaluation.error})</Text>
                  )}
                </div>
              ))}
          </Panel>

          <Panel
            header={`Schema Rules (${activeRules.schema.length} active)`}
            key='schema'
            extra={
              <Badge
                count={activeRules.schema.length}
                style={{ backgroundColor: '#52c41a' }}
              />
            }
          >
            {evaluations
              .filter(e => e.pillar === 'Schema')
              .map((evaluation, idx) => (
                <div key={idx} style={{ marginBottom: 8 }}>
                  <Tag color={evaluation.active ? 'green' : 'default'}>
                    {evaluation.active ? '✓' : '○'}
                  </Tag>
                  <Text>{evaluation.ruleName}</Text>
                  {evaluation.error && (
                    <Text type='danger'> (Error: {evaluation.error})</Text>
                  )}
                </div>
              ))}
          </Panel>

          <Panel
            header={`Validation Rules (${activeRules.validation.length} active)`}
            key='validation'
            extra={
              <Badge
                count={activeRules.validation.length}
                style={{ backgroundColor: '#52c41a' }}
              />
            }
          >
            {evaluations
              .filter(e => e.pillar === 'Validation')
              .map((evaluation, idx) => (
                <div key={idx} style={{ marginBottom: 8 }}>
                  <Tag color={evaluation.active ? 'green' : 'default'}>
                    {evaluation.active ? '✓' : '○'}
                  </Tag>
                  <Text>{evaluation.ruleName}</Text>
                  {evaluation.error && (
                    <Text type='danger'> (Error: {evaluation.error})</Text>
                  )}
                </div>
              ))}
          </Panel>
        </Collapse>
      </Space>
    </Card>
  );
};

export default function FormDevToolsExample() {
  const [formData, setFormData] = useState({});
  const [devToolsEnabled, setDevToolsEnabled] = useState(true);
  const [logToConsole, setLogToConsole] = useState(false);
  const [captureHistory, setCaptureHistory] = useState(false);

  // Apply conditional logic
  const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
  const conditionalSchema = useConditionalSchema(
    schemaRules,
    baseSchema,
    formData
  );
  const customValidate = useConditionalValidation(validationRules, formData);

  // Use DevTools
  const devTools = useFormDevTools(
    formData,
    uiRules,
    schemaRules,
    validationRules,
    {
      enabled: devToolsEnabled,
      logToConsole,
      captureHistory,
      historySize: 10,
    }
  );

  const handleChange = (e: IChangeEvent) => {
    setFormData(e.formData);
  };

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <Card title='DevTools Settings' style={{ marginBottom: 24 }}>
        <Space>
          <label>
            <Switch checked={devToolsEnabled} onChange={setDevToolsEnabled} />
            <Text style={{ marginLeft: 8 }}>Enable DevTools</Text>
          </label>
          <label>
            <Switch checked={logToConsole} onChange={setLogToConsole} />
            <Text style={{ marginLeft: 8 }}>Log to Console</Text>
          </label>
          <label>
            <Switch checked={captureHistory} onChange={setCaptureHistory} />
            <Text style={{ marginLeft: 8 }}>Capture History</Text>
          </label>
        </Space>
      </Card>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div>
          <Form
            schema={conditionalSchema}
            uiSchema={conditionalUiSchema}
            formData={formData}
            onChange={handleChange}
            validator={validator}
            customValidate={customValidate}
          />
        </div>

        <div>
          {devToolsEnabled && <DevToolsPanel devTools={devTools} />}

          {captureHistory && devTools.history.length > 0 && (
            <Card title='History' style={{ marginTop: 24 }}>
              <Text>History entries: {devTools.history.length}</Text>
              <div style={{ maxHeight: 200, overflow: 'auto', marginTop: 8 }}>
                {devTools.history.map((entry, idx) => (
                  <div
                    key={idx}
                    style={{
                      marginBottom: 8,
                      padding: 8,
                      background: '#f0f0f0',
                    }}
                  >
                    <Text type='secondary'>
                      {new Date(entry.timestamp).toLocaleTimeString()}
                    </Text>
                    <pre style={{ fontSize: 12, margin: 0 }}>
                      {JSON.stringify(entry.formData, null, 2)}
                    </pre>
                  </div>
                ))}
              </div>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}