import React, { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import type { Body_create_model_api_models_create_post } from '@/api/models/Body_create_model_api_models_create_post';
import type { Body_update_model_api_models__model_id__put } from '@/api/models/Body_update_model_api_models__model_id__put';
import ModelForm from './components/ModelForm';
import { api } from '@/lib/api';
import { ConfirmDialog } from '@/components/block/confirm-dialog';

interface ModelItem {
  id: number;
  tag: Record<string, string>;
  cover_url: string;
  status: number;
  create_time: string;
}

const ModelPage: React.FC = () => {
  const [models, setModels] = useState<ModelItem[]>([]);
  const [_, setLoading] = useState(false);
  const [selected, setSelected] = useState<ModelItem | null>(null);
  const [open, setOpen] = useState(false);
  const [editMode, setEditMode] = useState(false);

  const fetchModels = async () => {
    setLoading(true);
    try {
      const res = await api.Service.getModelsListApiModelsListGet({});
      setModels(res.data || []);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchModels();
  }, []);

  const handleAdd = () => {
    setEditMode(false);
    setSelected(null);
    setOpen(true);
  };

  const handleEdit = (item: ModelItem) => {
    setEditMode(true);
    setSelected(item);
    setOpen(true);
  };

  const handleDelete = async (id: number) => {
    ConfirmDialog.confirm({
      content: '确定要删除该模特吗？',
      onConfirm: async () => {
        await api.Service.deleteModelApiModelsModelIdDelete({ modelId: id });
        fetchModels();
      },
    });
  };

  const handleFormSubmit = async (data: Body_create_model_api_models_create_post | Body_update_model_api_models__model_id__put, id?: number) => {
    console.log(data);
    if (editMode && id) {
      await api.Service.updateModelApiModelsModelIdPut({ modelId: id, formData: data as Body_update_model_api_models__model_id__put });
    } else {
      await api.Service.createModelApiModelsCreatePost({ formData: data as Body_create_model_api_models_create_post });
    }
    setOpen(false);
    fetchModels();
  };

  return (
    <div className='p-6'>
      <div className='flex justify-between items-center mb-4'>
        <h1 className='text-2xl font-bold'>模特维护</h1>
        <Button onClick={handleAdd}>新建模特</Button>
      </div>
      <div className='grid gap-6 grid-cols-[repeat(auto-fit,minmax(500px,500px))]'>
        {models.map(item => (
          <div key={item.id} className='w-[500px] bg-white dark:bg-zinc-900 rounded-lg shadow p-4 flex gap-3'>
            <img src={item.cover_url} alt='cover' className='w-[200px] object-cover rounded aspect-[9/16]' />
            <div className='flex-1 flex flex-col gap-2'>
              <div className='flex-1 flex flex-col gap-1'>
                <div className='text-sm text-muted-foreground'>ID: {item.id}</div>
                <div className='text-sm truncate'>标签: {Object.values(item.tag).join('_')}</div>
                <div className='text-sm'>
                  状态: <span className={item.status === 1 ? 'text-green-600' : 'text-red-500'}>{item.status === 1 ? '启用' : '禁用'}</span>
                </div>
                <div className='text-xs text-muted-foreground'>创建时间: {item.create_time}</div>
              </div>
              <div className='mt-4 flex flex-col gap-2'>
                <Button variant='outline' onClick={() => handleEdit(item)} className='flex-1'>
                  编辑
                </Button>
                <Button variant='destructive' onClick={() => handleDelete(item.id)} className='flex-1' disabled={item.status === 1}>
                  删除
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent style={{ width: '650px', maxWidth: '650px' }}>
          <DialogTitle>{editMode ? '编辑模特' : '新建模特'}</DialogTitle>
          <ModelForm initialData={selected} onSubmit={handleFormSubmit} onCancel={() => setOpen(false)} editMode={editMode} />
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default ModelPage;