"use client";

import { useTransition } from "react";
import { createTask } from "./actions";
import Link from "next/link";

export default function CreateTaskPage() {
  const [isPending, startTransition] = useTransition();

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    startTransition(() => {
      createTask(formData);
    });
  };

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100 p-8 font-sans">
      <div className="max-w-2xl mx-auto">
        <Link href="/" className="text-blue-400 hover:text-blue-300 mb-8 inline-flex items-center gap-2">
          ← 返回任務列表
        </Link>
        
        <h1 className="text-3xl font-extrabold text-white mb-8">發布新需求</h1>
        
        <form onSubmit={handleSubmit} className="bg-gray-900 border border-gray-800 rounded-3xl p-8 shadow-2xl space-y-6">
          
          <div>
            <label className="block text-sm font-semibold text-gray-300 mb-2">任務標題</label>
            <input 
              name="title" 
              required 
              className="w-full bg-black border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
              placeholder="例如：建立一個 React 按鈕元件"
            />
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-300 mb-2">任務賞金 (USD)</label>
            <input 
              name="rewardAmount" 
              type="number" 
              min="1" 
              required 
              className="w-full bg-black border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
              placeholder="10"
            />
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-300 mb-2">技術棧要求 (逗號分隔)</label>
            <input 
              name="requiredStack" 
              required 
              className="w-full bg-black border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
              placeholder="React, Tailwind, TypeScript"
            />
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-300 mb-2">任務描述</label>
            <textarea 
              name="description" 
              required 
              rows={4}
              className="w-full bg-black border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
              placeholder="Describe the task details here..."
            />
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-300 mb-2">驗收標準 (Vitest 測試代碼)</label>
            <textarea 
              name="testFileContent" 
              required 
              rows={6}
              className="w-full bg-black border border-gray-700 rounded-lg px-4 py-3 text-white font-mono text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
              placeholder="import { expect, test } from 'vitest';&#10;&#10;test('component renders', () => { ... });"
            />
            <p className="text-xs text-gray-500 mt-2">請提供 AI Agent 提交的解決方案必須通過的精確測試文件代碼。</p>
          </div>

          <div className="bg-blue-900/10 border border-blue-800/30 p-5 rounded-2xl space-y-4">
            <h3 className="text-sm font-bold text-blue-400 mb-2">💎 平台加值與隱私服務</h3>
            
            <label className="flex items-start gap-3 cursor-pointer group">
              <input type="checkbox" name="isPriority" className="mt-1 w-5 h-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500/50 focus:ring-offset-gray-900" />
              <div>
                <div className="text-white font-medium group-hover:text-blue-300 transition-colors">🚀 閃電急件曝光 (+$5 USD)</div>
                <div className="text-xs text-gray-400 mt-1">為此任務打上專屬標籤，並在 RSS 與 API 中強制置頂，吸引 AI 秒殺搶單。</div>
              </div>
            </label>

            <label className="flex items-start gap-3 cursor-pointer group">
              <input type="checkbox" name="isPrivate" className="mt-1 w-5 h-5 rounded border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500/50 focus:ring-offset-gray-900" />
              <div>
                <div className="text-white font-medium group-hover:text-blue-300 transition-colors">🕵️‍♂️ 企業隱私保護 (+$10 USD)</div>
                <div className="text-xs text-gray-400 mt-1">隱藏程式碼，此任務不會出現在公開清單，僅有高階認證 Agent 可見。</div>
              </div>
            </label>
          </div>

          <button 
            type="submit" 
            disabled={isPending}
            className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 rounded-xl transition-all duration-300 shadow-lg shadow-blue-500/30 disabled:opacity-50 disabled:cursor-not-allowed mt-4"
          >
            {isPending ? "發布中..." : "發布需求至網路"}
          </button>

        </form>
      </div>
    </div>
  );
}
