import AdminNav from '@/components/AdminNav';
import Link from 'next/link';
import { isAdminAuthenticated } from '@/lib/adminAuth';
import { uploadBankStatement } from '../actions';

export default async function UploadStatementPage() {
  const isAdmin = await isAdminAuthenticated();
  if (!isAdmin) {
    return <div className="px-6 py-12 text-center">Unauthorized</div>;
  }

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <AdminNav />
      <Link href="/admin/accounts/reconciliation" className="text-sm text-muted hover:text-ink mb-4 inline-block">
        ← Back to reconciliation
      </Link>

      <h1 className="font-display text-3xl mb-2">Upload Bank Statement</h1>
      <p className="text-sm text-muted mb-8">
        Upload a CSV export of your bank statement. The system will automatically match transactions and flag discrepancies.
      </p>

      <form action={uploadBankStatement} className="space-y-6 border border-line bg-surface p-6">
        <div>
          <label className="block text-sm font-medium mb-2">CSV File</label>
          <input
            type="file"
            name="file"
            accept=".csv"
            required
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
          <p className="text-xs text-muted mt-1">
            💡 Most banks let you export statements as CSV. Required columns: Date, Description, Amount
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label className="block text-sm font-medium mb-2">Bank Name (optional)</label>
            <input
              type="text"
              name="bankName"
              placeholder="e.g., HSBC, Barclays, Stripe"
              className="w-full border border-line bg-paper px-3 py-2 text-sm"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-2">Account Number (last 4 digits)</label>
            <input
              type="text"
              name="accountNumber"
              placeholder="e.g., 1234"
              maxLength={4}
              className="w-full border border-line bg-paper px-3 py-2 text-sm"
            />
          </div>
        </div>

        <div className="bg-splash-blue/5 border border-splash-blue/40 p-4 text-sm text-splash-blue space-y-2">
          <p className="font-medium">📋 CSV Format Tips:</p>
          <ul className="list-disc pl-5 space-y-1">
            <li>First row should contain column headers (Date, Description, Amount, etc.)</li>
            <li>Dates can be: DD/MM/YYYY, YYYY-MM-DD, or MM/DD/YYYY</li>
            <li>Amounts can include commas (1,234.56) or be negative</li>
            <li>Negative amounts in parentheses: (1,234.56) = -1,234.56</li>
            <li>Extra columns (Balance, Reference) are optional</li>
          </ul>
        </div>

        <div className="bg-green-50 border border-green-200 p-4 text-sm text-green-700 space-y-2">
          <p className="font-medium">✓ Automatic Matching:</p>
          <ul className="list-disc pl-5 space-y-1">
            <li>Orders and manual sales are matched by amount + date</li>
            <li>Confidence scoring: exact amount = 100%, fuzzy = 50-99%</li>
            <li>You can manually adjust any incorrect matches</li>
            <li>The system helps you verify nothing is missing</li>
          </ul>
        </div>

        <button
          type="submit"
          className="w-full border border-ink bg-ink text-paper px-4 py-2 text-sm font-medium hover:border-clay hover:bg-clay"
        >
          ⬆ Upload Statement
        </button>
      </form>

      <div className="mt-8 space-y-4">
        <p className="text-sm font-medium">How reconciliation works:</p>
        <ol className="list-decimal pl-5 space-y-2 text-sm text-muted">
          <li>Upload a CSV export from your bank</li>
          <li>System auto-matches transactions based on amount + date</li>
          <li>Review unmatched items and manually match them</li>
          <li>Check for discrepancies (amount mismatches)</li>
          <li>Mark as reconciled when everything matches</li>
          <li>Archive statement for record-keeping</li>
        </ol>
      </div>
    </div>
  );
}
