import { type FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Skeleton, Space, Progress } from 'antd';
import RbCard from '@/components/RbCard/Card'
import Empty from '@/components/Empty'
import {
  getImplicitHabits,
} from '@/api/memory'

interface HabitsItem {
  habit_description: string;
  frequency_pattern: string;
  time_context: string;
  confidence_level: string;
  supporting_summaries: string[];
  first_observed: string;
  last_observed: string;
  is_current: boolean;
  specific_examples: string[];
}

const Habits: FC = () => {
  const { t } = useTranslation()
  const { id } = useParams()
  const [loading, setLoading] = useState<boolean>(false)
  const [data, setData] = useState<HabitsItem[]>([])

  useEffect(() => {
    if (!id) return
    getData()
  }, [id])
  
  // 记忆洞察
  const getData = () => {
    if (!id) return
    setLoading(true)
    getImplicitHabits(id).then((res) => {
      const response = res as HabitsItem[]
      setData(response)
      setLoading(false) 
    })
    .finally(() => {
      setLoading(false)
    })
  }

  return (
    <>
      <div className="rb:bg-[rgba(21,94,239,0.12)] rb:px-3 rb:py-2.5 rb:font-medium rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">{t('implicitDetail.habits')}</div>
      <div className="rb:my-3 rb:text-[#5B6167] rb:leading-5">{t('implicitDetail.habitsSubTitle')}</div>
      <RbCard>
        {loading
          ? <Skeleton active />
          : data.length === 0
            ? <Empty size={88} />
            : <Space size={12} direction="vertical" className="rb:w-full!">
              {data.map((vo, voIdx) => (
                <div key={voIdx} className="rb:leading-5 rb:shadow-[inset_3px_0px_0px_0px_#155EEF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3">
                  <div className="rb:flex rb:items-center rb:justify-between">
                    <div>
                      <div className="rb:mb-1">{vo.habit_description}</div>
                      <div className="rb:mb-1 rb:text-[#5B6167]">{vo.time_context}</div>
                    </div>
                    <div className="rb:text-[24px] rb:font-medium">{vo.confidence_level}%</div>
                  </div>

                  {vo.specific_examples.length > 0 && <>
                    <div className="rb:mt-3 rb:mb-2">{t('implicitDetail.specific_examples')}</div>
                    <div className="rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3">
                      {vo.specific_examples.map((item, index) => (
                        <div key={index} className="rb:text-[#5B6167] rb:text-[12px] rb:mt-1">- {item}</div>
                      ))}
                    </div>
                  </>}
                  <Progress percent={vo.confidence_level} showInfo={false} className="rb:mt-3" />
                </div>
              ))}
            </Space>
        }
      </RbCard>
    </>
  )
}
export default Habits