import { useState } from 'react'
import { X, Download } from 'lucide-react'
import { useAgentStore } from '../store/agentStore'

export default function ExportDialog({ onClose }) {
  const [includeErrors, setIncludeErrors] = useState(true)
  const messages = useAgentStore((state) => state.messages)

  const handleExport = () => {
    const rows = messages
      .filter((m) => includeErrors || !(typeof m.content === 'string' && m.content.startsWith('⚠️')))
      .map((m) => {
        const row = { role: m.role, content: m.content || '' }
        if (m.tool_call_id) row.tool_call_id = m.tool_call_id
        if (m.name) row.name = m.name
        if (m.tool_calls?.length) {
          row.tool_calls = m.tool_calls.map((c) => ({
            id: c.id,
            type: c.type,
            function: { name: c.function?.name, arguments: c.function?.arguments },
          }))
        }
        return row
      })

    const dataStr = JSON.stringify(
      {
        timestamp: new Date().toISOString(),
        source: 'Agent Studio (Agent 頁)',
        messages: rows,
      },
      null,
      2,
    )

    const blob = new Blob([dataStr], { type: 'application/json' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `agent-conversation-${new Date().toISOString().slice(0, 10)}.json`
    a.click()
    URL.revokeObjectURL(url)
    onClose()
  }

  const isEmpty = messages.length === 0

  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
      <div className="bg-panel p-8 rounded-3xl w-full max-w-md border border-edge">
        <div className="flex justify-between items-center mb-6">
          <h3 className="text-2xl font-bold">匯出對話</h3>
          <button onClick={onClose} className="text-muted hover:text-ink">
            <X className="w-5 h-5" />
          </button>
        </div>
        <div className="space-y-5">
          <p className="text-sm text-muted">
            共 {messages.length} 則訊息（只匯出 Agent 頁，聊天頁是獨立對話）。
          </p>
          <label className="flex items-center gap-3 text-sm">
            <input
              type="checkbox"
              checked={includeErrors}
              onChange={(e) => setIncludeErrors(e.target.checked)}
              className="w-4 h-4"
            />
            包含錯誤訊息（⚠️ 開頭的內容）
          </label>
          <button
            onClick={handleExport}
            disabled={isEmpty}
            className="w-full flex items-center justify-center gap-2 bg-purple-600 py-3 rounded-2xl font-medium disabled:opacity-40"
          >
            <Download className="w-4 h-4" /> 下載 JSON
          </button>
        </div>
      </div>
    </div>
  )
}