// components/TemplateFormClient.tsx
'use client';
import { useState, type ChangeEvent } from 'react';
import Link from "next/link";
import DependentDropdown, { type DropdownData } from '@/components/utils/DependentDropdown';

interface TemplateFormClientProps {
    templateData: DropdownData;
}

export default function TemplateFormClient({ templateData }: TemplateFormClientProps) {
    const handleTmplSelect = (template: string, data: string) => {
        // Handle selection if needed
    };

    return (



        
        <div className="mt-5 grid gap-5 sm:grid-cols-2">
            {/* ส่วน Template & Data แสดงรายการไฟล์จริงจากโฟลเดอร์ */}
            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
                <div>
                    <h3 className="font-display text-subhead text-ink">Template & Data</h3>
                    <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
                        {Object.entries(templateData).map(([tid, jsonList]) => (
                            <div key={tid} className="mb-3">
                                <b>Template: </b>
                                <Link href={`/tmpl/${tid}.docx`} className="text-primary transition hover:underline">
                                    {tid}.docx
                                </Link>
                                <br />
                                <b>Data: </b>
                                {jsonList.map((fid, idx) => (
                                    <span key={fid}>
                                        <Link href={`/tmpl/${fid}.json`} className="text-primary transition hover:underline">
                                            {fid}.json
                                        </Link>
                                        {idx < jsonList.length - 1 ? ', ' : ''}
                                    </span>
                                ))}
                            </div>
                        ))}
                        <div className="mt-2">
                            นำไฟล์ไปทดสอบกับ <Link href="/api/swagger/" target="_top" className="text-primary transition hover:underline">API</Link>
                        </div>
                    </div>
                </div>
            </div>
            {/* ส่วน Form (POST) */}
            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
                <div>
                    <h3 className="font-display text-subhead text-ink">Form (POST)</h3>
                    <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
                        <form action="/docedit/api/template/download-docx" method="POST">
                            <DependentDropdown data={templateData} name1='tid' name2='fid'
                                label1="Template(tid):" label2="ข้อมูล(fid):" onSelectChange={handleTmplSelect} />
                            <div className="mb-2"></div>
                            <div>
                                <label htmlFor="uid">uid:
                                    <input type="text" name="uid" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="john" />
                                </label>
                            </div>
                            <div>
                                <label htmlFor="uname">uname:
                                    <input type="text" name="uname" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="John Doe" />
                                </label>
                            </div>
                            <button
                                type="submit"
                                style={{
                                    padding: '10px 20px',
                                    backgroundColor: '#0070f3',
                                    color: '#fff',
                                    border: 'none',
                                    borderRadius: '5px',
                                    cursor: 'pointer',
                                }}
                            >
                                ดาวน์โหลดเอกสาร MS Word
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {/* ส่วน Link (GET) */}
            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
                <div>
                    <h3 className="font-display text-subhead text-ink">Link (GET)</h3>
                    <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
                        {Object.entries(templateData).map(([tid, jsonList]) => {
                            // jsonList คืออาเรย์ของชื่อไฟล์ json (fid) ที่ผูกอยู่กับ template (tid) นี้
                            return jsonList.map((fid) => {
                                const linkHref = `/docedit/api/template/download-docx?tid=${tid}&fid=${fid}&uid=john&uname=John%20Doe`;
                                const displayLabel = `${fid}_john_xxx.docx`; // หรือปรับรูปแบบข้อความแสดงผลตามต้องการ

                                return (
                                    <span key={`${tid}-${fid}`}>
                                        <a href={linkHref} className="text-primary transition hover:underline">
                                            {displayLabel}
                                        </a>
                                        <br />
                                    </span>
                                );
                            });
                        })}
                    </p>
                </div>
            </div>

        </div>
    );
}