'use client'

import React, { useEffect, useState, Fragment } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import Image from 'next/image'
import { ProfileCard } from '../../components/ProfileCard'
import { CustomizationPanel } from '../../components/CustomizationPanel'
import { GroupEditModal } from '../../components/GroupEditModal'

interface UserProfile {
  id: number
  username: string
  email: string
  full_name: string
  bio?: string
  avatar: string
  last_login: string
  date_joined: string
}

interface LinkItem {
  id: number
  title: string
  url: string
  icon?: string
  group: number
}

interface Group {
  id: number
  name: string
  description?: string
  icon?: string
  icon_url?: string
  header_color: string
  background_image?: string
  background_image_url?: string
  is_expanded: boolean
  display_style: 'grid' | 'list' | 'cards'
  links: LinkItem[]
}

interface DesignSettings {
  id?: number
  theme_color: string
  background_image?: string
  dashboard_layout: 'sidebar' | 'grid' | 'list'
  groups_default_expanded: boolean
  show_group_icons: boolean
  show_link_icons: boolean
  dashboard_background_color: string
  font_family: string
  custom_css: string
}

export default function DashboardPage() {
  const router = useRouter()
  const [user, setUser] = useState<UserProfile | null>(null)
  const [groups, setGroups] = useState<Group[]>([])
  const [expandedGroup, setExpandedGroup] = useState<number | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  
  // Состояния для кастомизации
  const [designSettings, setDesignSettings] = useState<DesignSettings>({
    theme_color: '#ffffff',
    dashboard_layout: 'list',
    groups_default_expanded: true,
    show_group_icons: true,
    show_link_icons: true,
    dashboard_background_color: '#f8f9fa',
    font_family: 'sans-serif',
    custom_css: ''
  })
  const [showCustomizationPanel, setShowCustomizationPanel] = useState(false)

  // === Для модалок групп ===
  const [showGroupModal, setShowGroupModal] = useState(false)
  const [groupModalMode, setGroupModalMode] = useState<'add' | 'edit'>('add')
  const [groupForm, setGroupForm] = useState({ name: '', iconFile: null as File | null })
  const [editingGroup, setEditingGroup] = useState<Group | null>(null)

  // === Для модалок ссылок ===
  const [showLinkModal, setShowLinkModal] = useState(false)
  const [linkModalMode, setLinkModalMode] = useState<'add' | 'edit'>('add')
  const [editingLink, setEditingLink] = useState<LinkItem | null>(null)
  const [currentGroupIdForLink, setCurrentGroupIdForLink] = useState<number | null>(null)
  const [linkForm, setLinkForm] = useState<{ title: string; url: string; iconFile: File | null }>({
    title: '',
    url: '',
    iconFile: null,
  })

  const API = ''

  useEffect(() => {
    const token = localStorage.getItem('token')
    if (!token) {
      router.push('/auth/login')
      return
    }
    // загружаем профиль, группы, ссылки и настройки дизайна
    Promise.all([
      fetch('/api/auth/user', { headers: { Authorization: `Bearer ${token}` } }),
      fetch('/api/groups', { headers: { Authorization: `Bearer ${token}` } }),
      fetch('/api/links', { headers: { Authorization: `Bearer ${token}` } }),
      fetch('/api/customization/settings/', { headers: { Authorization: `Bearer ${token}` } })
    ])
      .then(async ([uRes, gRes, lRes, sRes]) => {
        if (!uRes.ok) throw new Error('Не удалось получить профиль')
        if (!gRes.ok) throw new Error('Не удалось загрузить группы')
        if (!lRes.ok) throw new Error('Не удалось загрузить ссылки')
        
        const userData   = await uRes.json()
        const groupsData = await gRes.json()
        const linksData  = await lRes.json()

        // Загружаем настройки дизайна если доступны
        if (sRes.ok) {
          const settingsData = await sRes.json()
          setDesignSettings(prev => ({ ...prev, ...settingsData }))
        }

        // «привязываем» ссылки к группам
        const enrichedGroups: Group[] = groupsData.map((grp: any) => ({
          ...grp,
          links: linksData.filter((link: LinkItem) => link.group === grp.id),
        }))
        setUser(userData)
        setGroups(enrichedGroups)
      })
      .catch(err => setError((err as Error).message))
      .finally(() => setLoading(false))
  }, [router])

  // Перезагрузка списка групп и ссылок
  async function reloadData() {
    const token = localStorage.getItem('token')!
    const [gRes, lRes] = await Promise.all([
      fetch('/api/groups', { headers: { Authorization: `Bearer ${token}` } }),
      fetch('/api/links',  { headers: { Authorization: `Bearer ${token}` } }),
    ])
    const groupsData = await gRes.json()
    const linksData  = await lRes.json()
    const enrichedGroups: Group[] = groupsData.map((grp: any) => ({
      ...grp,
      links: linksData.filter((link: LinkItem) => link.group === grp.id),
    }))
    setGroups(enrichedGroups)
  }

  // === Обработчики групп ===
  function openAddGroup() {
    setGroupModalMode('add')
    setGroupForm({ name: '', iconFile: null })
    setShowGroupModal(true)
  }
  function openEditGroup(grp: Group) {
    setGroupModalMode('edit')
    setEditingGroup(grp)
    setGroupForm({ name: grp.name, iconFile: null })
    setShowGroupModal(true)
  }
  async function handleGroupSubmit() {
    const token = localStorage.getItem('token')!
    const fd = new FormData()
    fd.append('name', groupForm.name)
    if (groupForm.iconFile) fd.append('icon', groupForm.iconFile)
    const url = groupModalMode === 'add'
      ? '/api/groups'
      : `/api/groups/${editingGroup?.id}`
    const method = groupModalMode === 'add' ? 'POST' : 'PATCH'
    await fetch(url, {
      method,
      headers: { Authorization: `Bearer ${token}` },
      body: fd,
    })
    setShowGroupModal(false)
    await reloadData()
  }
  async function handleDeleteGroup(grp: Group) {
    if (!confirm(`Удалить группу "${grp.name}"?`)) return
    const token = localStorage.getItem('token')!
    await fetch(`/api/groups/${grp.id}`, {
      method: 'DELETE',
      headers: { Authorization: `Bearer ${token}` },
    })
    await reloadData()
  }

  // === Обработчики ссылок ===
  function openAddLink(grp: Group) {
    setLinkModalMode('add')
    setCurrentGroupIdForLink(grp.id)
    setLinkForm({ title: '', url: '', iconFile: null })
    setShowLinkModal(true)
  }
  function openEditLink(link: LinkItem) {
    setLinkModalMode('edit')
    setEditingLink(link)
    setCurrentGroupIdForLink(link.group)
    setLinkForm({ title: link.title, url: link.url, iconFile: null })
    setShowLinkModal(true)
  }
  async function handleLinkSubmit() {
    const token = localStorage.getItem('token')!
    const fd = new FormData()
    fd.append('title', linkForm.title)
    fd.append('url', linkForm.url)
    if (linkForm.iconFile) fd.append('icon', linkForm.iconFile)
    fd.append('group', String(currentGroupIdForLink))
    const url = linkModalMode === 'add'
      ? '/api/links'
      : `/api/links/${editingLink?.id}`
    const method = linkModalMode === 'add' ? 'POST' : 'PATCH'
    await fetch(url, {
      method,
      headers: { Authorization: `Bearer ${token}` },
      body: fd,
    })
    setShowLinkModal(false)
    await reloadData()
  }
  async function handleDeleteLink(link: LinkItem) {
    if (!confirm(`Удалить ссылку "${link.title}"?`)) return
    const token = localStorage.getItem('token')!
    await fetch(`/api/links/${link.id}`, {
      method: 'DELETE',
      headers: { Authorization: `Bearer ${token}` },
    })
    await reloadData()
  }

  if (loading)  return <div className="flex items-center justify-center h-screen">Загрузка...</div>
  if (error)    return <div className="p-6 text-red-600 max-w-xl mx-auto">{error}</div>

  const totalGroups = groups.length
  const totalLinks  = groups.reduce((sum, grp) => sum + grp.links.length, 0)

  return (
    <div 
      className="pb-8" 
      style={{ 
        backgroundColor: designSettings.dashboard_background_color, 
        fontFamily: designSettings.font_family 
      }}
    >
      {user && (
        <ProfileCard
          avatar={user.avatar}
          full_name={user.full_name}
          email={user.email}
          bio={user.bio}
          last_login={user.last_login}
          date_joined={user.date_joined}
          totalGroups={totalGroups}
          totalLinks={totalLinks}
        />
      )}

      <div className="container my-4">
        {/* Панель управления */}
        <div className="d-flex justify-content-between align-items-center mb-4">
          <h2 className="mb-0">
            <i className="bi bi-collection me-2"></i>
            Мои группы и ссылки
          </h2>
          <div className="btn-group">
            <button 
              className="btn btn-primary"
              onClick={() => {
                setGroupModalMode('add')
                setEditingGroup(null)
                setShowGroupModal(true)
              }}
            >
              <i className="bi bi-plus-circle me-2"></i>
              Добавить группу
            </button>
            <button 
              className="btn btn-outline-secondary"
              onClick={() => setShowCustomizationPanel(true)}
              title="Настройки дашборда"
            >
              <i className="bi bi-palette"></i>
            </button>
          </div>
        </div>
          totalLinks={totalLinks}
        />
      )}

      <section className="mt-5 container">
        <div className="card shadow">
          <div className="card-header d-flex justify-content-between align-items-center">
            <h5 className="mb-0">Группы ссылок</h5>
            <button className="btn btn-sm btn-success" onClick={openAddGroup}>
              <i className="bi bi-plus-lg"></i> Добавить группу
            </button>
          </div>

          <div className="list-group list-group-flush">
            {groups.map(group => (
              <Fragment key={group.id}>
                <div className="list-group-item d-flex justify-content-between align-items-center">
                  <div
                    className="d-flex align-items-center"
                    style={{ cursor: 'pointer' }}
                    onClick={() =>
                      setExpandedGroup(expandedGroup === group.id ? null : group.id)
                    }
                  >
                    {group.icon && (
                      <img
                        src={`${API}${group.icon}`}
                        width={32}
                        height={32}
                        className="me-2 rounded"
                        alt={group.name}
                      />
                    )}
                    <strong className="me-2">{group.name}</strong>
                    <span className="badge bg-secondary rounded-pill">
                      {group.links.length}
                    </span>
                  </div>
                  <div className="btn-group btn-group-sm">
                    <button onClick={() => openAddLink(group)} className="btn btn-outline-primary">
                      <i className="bi bi-link-45deg"></i>
                    </button>
                    <button onClick={() => openEditGroup(group)} className="btn btn-outline-secondary">
                      <i className="bi bi-pencil"></i>
                    </button>
                    <button onClick={() => handleDeleteGroup(group)} className="btn btn-outline-danger">
                      <i className="bi bi-trash"></i>
                    </button>
                  </div>
                </div>

                {expandedGroup === group.id && (
                  <div className="list-group-item bg-light">
                    <ul className="mb-0 ps-3">
                      {group.links.map(link => (
                        <li
                          key={link.id}
                          className="d-flex justify-content-between align-items-center mb-2"
                        >
                          <div className="d-flex align-items-center">
                            {link.icon && (
                              <img
                                src={link.icon && link.icon.startsWith('http')
                                  ? link.icon
                                  : `${API}${link.icon}`}
                                width={24}
                                height={24}
                                className="me-2"
                                alt={link.title}
                              />
                            )}
                            <a href={link.url} target="_blank" rel="noopener noreferrer">
                              {link.title}
                            </a>
                          </div>
                          <div className="btn-group btn-group-sm">
                            <button onClick={() => openEditLink(link)} className="btn btn-outline-secondary">
                              <i className="bi bi-pencil-fill"></i>
                            </button>
                            <button onClick={() => handleDeleteLink(link)} className="btn btn-outline-danger">
                              <i className="bi bi-trash-fill"></i>
                            </button>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* Модалка добавления/редактирования группы */}
      <div className={`modal ${showGroupModal ? 'd-block' : 'd-none'}`} tabIndex={-1}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">{groupModalMode === 'add' ? 'Добавить группу' : 'Редактировать группу'}</h5>
              <button type="button" className="btn-close" onClick={() => setShowGroupModal(false)} />
            </div>
            <div className="modal-body">
              <div className="mb-3">
                <label className="form-label">Название</label>
                <input
                  type="text"
                  className="form-control"
                  value={groupForm.name}
                  onChange={e => setGroupForm(f => ({ ...f, name: e.target.value }))}
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Иконка (опционально)</label>
                <input
                  type="file"
                  className="form-control"
                  onChange={e => setGroupForm(f => ({ ...f, iconFile: e.target.files?.[0] || null }))}
                />
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn btn-secondary" onClick={() => setShowGroupModal(false)}>Отмена</button>
              <button className="btn btn-primary" onClick={handleGroupSubmit}>
                Сохранить
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Модалка добавления/редактирования ссылки */}
      <div className={`modal ${showLinkModal ? 'd-block' : 'd-none'}`} tabIndex={-1}>
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">{linkModalMode === 'add' ? 'Добавить ссылку' : 'Редактировать ссылку'}</h5>
              <button type="button" className="btn-close" onClick={() => setShowLinkModal(false)} />
            </div>
            <div className="modal-body">
              <div className="mb-3">
                <label className="form-label">Заголовок</label>
                <input
                  type="text"
                  className="form-control"
                  value={linkForm.title}
                  onChange={e => setLinkForm(f => ({ ...f, title: e.target.value }))}
                />
              </div>
              <div className="mb-3">
                <label className="form-label">URL</label>
                <input
                  type="url"
                  className="form-control"
                  value={linkForm.url}
                  onChange={e => setLinkForm(f => ({ ...f, url: e.target.value }))}
                />
              </div>
              <div className="mb-3">
                <label className="form-label">Иконка (опционально)</label>
                <input
                  type="file"
                  className="form-control"
                  onChange={e => setLinkForm(f => ({ ...f, iconFile: e.target.files?.[0] || null }))}
                />
              </div>
            </div>
            <div className="modal-footer">
              <button className="btn btn-secondary" onClick={() => setShowLinkModal(false)}>Отмена</button>
              <button className="btn btn-primary" onClick={handleLinkSubmit}>
                Сохранить
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Панель кастомизации */}
      <CustomizationPanel
        isOpen={showCustomizationPanel}
        onClose={() => setShowCustomizationPanel(false)}
        onSettingsUpdate={(settings) => {
          setDesignSettings(settings)
          setShowCustomizationPanel(false)
        }}
      />

      {/* Модальное окно редактирования группы */}
      <GroupEditModal
        isOpen={showGroupModal}
        onClose={() => {
          setShowGroupModal(false)
          setEditingGroup(null)
        }}
        onSave={async (groupData, iconFile) => {
          const token = localStorage.getItem('token')
          const formData = new FormData()
          
          Object.entries(groupData).forEach(([key, value]) => {
            if (value !== null && value !== undefined) {
              formData.append(key, value.toString())
            }
          })
          
          if (iconFile) {
            formData.append('icon', iconFile)
          }

          const url = groupModalMode === 'edit' 
            ? `/api/groups/${editingGroup?.id}/`
            : '/api/groups/'
          
          const method = groupModalMode === 'edit' ? 'PUT' : 'POST'

          try {
            const response = await fetch(url, {
              method,
              headers: {
                'Authorization': `Bearer ${token}`
              },
              body: formData
            })

            if (response.ok) {
              await reloadData()
              setShowGroupModal(false)
              setEditingGroup(null)
            } else {
              throw new Error('Ошибка при сохранении группы')
            }
          } catch (error) {
            console.error('Error saving group:', error)
            throw error
          }
        }}
        group={editingGroup}
        mode={groupModalMode}
      />
    </div>
  )
}
