import { apiQueryConfigAlarm } from '@/services/master/MessageController';
import { useModel } from '@umijs/max';
import { Button, Card, Col, Row, Select, theme, Typography } from 'antd';
import { useEffect, useState } from 'react';

const { Text } = Typography;

// Recording modes for V6
const RECORDING_MODES = [
  { label: 'Không ghi', value: 'none' },
  { label: 'Theo cảnh báo', value: 'alarm' },
  { label: '24/24', value: 'all' },
];

interface CameraV6Props {
  thing: MasterModel.Thing | null;
  cameraConfig?: MasterModel.CameraV6 | null;
}

const CameraV6: React.FC<CameraV6Props> = ({ thing, cameraConfig }) => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');
  const [selectedAlerts, setSelectedAlerts] = useState<string[]>([]);
  const [recordingMode, setRecordingMode] = useState<'none' | 'alarm' | 'all'>(
    'none',
  );
  const [alarmConfig, setAlarmConfig] = useState<MasterModel.Alarm[] | null>(
    null,
  );

  // Initialize states from cameraConfig when it's available
  useEffect(() => {
    if (cameraConfig) {
      // Set recording mode from config
      if (cameraConfig.record_type) {
        setRecordingMode(cameraConfig.record_type);
      }

      // Set selected alerts from config
      if (
        cameraConfig.record_alarm_list &&
        Array.isArray(cameraConfig.record_alarm_list)
      ) {
        setSelectedAlerts(cameraConfig.record_alarm_list);
      }
    }
  }, [cameraConfig]);

  // Fetch alarm config when thing data is available and recording mode is 'alarm'
  useEffect(() => {
    const fetchAlarmConfig = async () => {
      if (
        !thing ||
        !initialState?.currentUserProfile?.metadata?.frontend_thing_key ||
        recordingMode !== 'alarm'
      ) {
        return;
      }

      try {
        const resp = await apiQueryConfigAlarm(
          thing.metadata?.data_channel_id || '',
          initialState.currentUserProfile.metadata.frontend_thing_key,
          {
            offset: 0,
            limit: 1,
            subtopic: `config.${thing.metadata?.type}.alarms`,
          },
        );
        if (resp.messages && resp.messages.length > 0) {
          const parsed = resp.messages[0].string_value_parsed;
          if (Array.isArray(parsed)) {
            setAlarmConfig(parsed as MasterModel.Alarm[]);
          } else {
            setAlarmConfig([]);
          }
        }
      } catch (error) {
        console.error('Failed to fetch alarm config:', error);
      }
    };

    fetchAlarmConfig();
  }, [thing, initialState, recordingMode]);

  const handleAlertToggle = (alertId: string) => {
    if (selectedAlerts.includes(alertId)) {
      setSelectedAlerts(selectedAlerts.filter((id) => id !== alertId));
    } else {
      setSelectedAlerts([...selectedAlerts, alertId]);
    }
  };

  const handleClearAlerts = () => {
    setSelectedAlerts([]);
  };

  const handleSubmitAlerts = () => {
    console.log('Submit alerts:', {
      recordingMode,
      selectedAlerts,
    });
    // TODO: Call API to save alert configuration
  };

  return (
    <Card className="p-4">
      {/* Recording Mode */}
      <div className="mb-6">
        <Text strong className="block mb-2">
          Ghi dữ liệu camera
        </Text>
        <div className="flex gap-8 items-center">
          <Select
            value={recordingMode}
            onChange={setRecordingMode}
            options={RECORDING_MODES}
            className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
          />
          <Button type="primary" onClick={handleSubmitAlerts}>
            Gửi đi
          </Button>
        </div>
      </div>

      {/* Alert List - Only show when mode is 'alarm' */}
      {recordingMode === 'alarm' && (
        <div>
          <Text strong className="block mb-2">
            Danh sách cảnh báo
          </Text>

          <div
            className="flex justify-between items-center mb-4 px-3 py-2 rounded border"
            style={{
              background: token.colorBgContainer,
              borderColor: token.colorBorder,
            }}
          >
            <Text type="secondary">đã chọn {selectedAlerts.length} mục</Text>
            <Button type="link" onClick={handleClearAlerts}>
              Xóa
            </Button>
          </div>

          {/* Alert Cards Grid */}
          <Row gutter={[12, 12]}>
            {alarmConfig?.map((alarm) => {
              const alarmId = alarm.id ?? '';
              const isSelected =
                alarmId !== '' && selectedAlerts.includes(alarmId);
              return (
                <Col xs={12} sm={8} md={6} lg={4} xl={4} key={alarmId}>
                  <Card
                    size="small"
                    hoverable
                    onClick={() => handleAlertToggle(alarmId)}
                    className="cursor-pointer h-20 flex items-center justify-center"
                    style={{
                      borderColor: isSelected
                        ? token.colorPrimary
                        : token.colorBorder,
                      borderWidth: isSelected ? 2 : 1,
                      background: isSelected
                        ? token.colorPrimaryBg
                        : token.colorBgContainer,
                    }}
                  >
                    <div className="p-2 text-center w-full">
                      <Text
                        className="text-xs break-words"
                        style={{
                          color: isSelected
                            ? token.colorPrimary
                            : token.colorText,
                        }}
                      >
                        {alarm.name}
                      </Text>
                    </div>
                  </Card>
                </Col>
              );
            })}
          </Row>
        </div>
      )}
    </Card>
  );
};

export default CameraV6;
